1. #1

    Registered
    02/10/13
    Location
    Adinkerke
    Posts
    116
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0

    Geolocation + Leaflet + GeoJSON

    Onderstaand voorbeeldscript toont een leaflet-map dmv Geolocation.
    Via geoJSON worden er geografische gegevens opgehaald via een url.
    Mijn vraag is hoe de coördinaten (lat en lng) kan overbrengen uit de functie 'onLocationFound(e)' om in de geoJSON-url te kunnen verwerken?

    Vb url: http://www.mijndomein.com/geo-json+51.1+2.65

    Code:
    Leaflet Map
    <div id="map" style="height:1000px"></div>
    <script>
    
    var myTiles = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    			maxZoom: 18
      });
    
    var map = L.map('map');
    
    myTiles.addTo(map);
    
    /* Geolocation */
    function onLocationFound(e) {
      var radius = e.accuracy / 2;
    
      L.marker(e.latlng).addTo(map)
    				.bindPopup("You are within " + radius + " meters from this point").openPopup();
    
      L.circle(e.latlng, radius).addTo(map);
      }
    
    function onLocationError(e) {
      alert(e.message);
      }
    
    map.on('locationfound', onLocationFound);
    map.on('locationerror', onLocationError);
    
    map.locate({setView: true, maxZoom: 16});
    
    /* Get JSON-data from link */
    jQuery.getJSON("http://www.mijndomein.com/geoloc-json"+coördinaten, function(data) {
      var geojson = L.geoJson(data, {
        onEachFeature: function (feature, layer) {
          layer.bindPopup(feature.properties.name);
        }
      });
     geojson.addTo(map);
    });
    </script>
    no votes  

  2. #2
    bealzebub's Avatar
    Registered
    28/06/06
    Location
    Gent
    Posts
    376
    iTrader
    1 (100%)
    Mentioned
    0 Post(s)
    Zoiets:

    Code:
    <html>
    <head>
      <title>Leaflet map</title>
      <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
    </head>
    <body>
    
      <h1>Leaflet Map</h1>
      <div id="map" style="height:1000px"></div>
    
      <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
      <script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
    
      <script type="text/javascript" charset="utf-8">
      "use strict";
    
      // Let's do this the right way and encapsulate the geolocation drawing in its own object
      // This is just a lot cleaner and doesn't pollute the global namespace.
      // Polluting the global namespace (window) is just lazy and can only lead to problems
      // further down the road (when you accidentally reuse the same variable for example)
    
      var Geolocation, geolocation,
        __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
    
      Geolocation = (function() {
        // Constructor
        function Geolocation(element) {
          // Bind all functions to the Geolocation function
          this.plotServerData = __bind(this.plotServerData, this);
          this.getServerData = __bind(this.getServerData, this);
          this.onLocationError = __bind(this.onLocationError, this);
          this.onLocationFound = __bind(this.onLocationFound, this);
    
          // Tiles generator
          var myTiles;
          myTiles = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 18
          });
          this.map = L.map(element);
          myTiles.addTo(this.map);
    
          // Event callbacks
          this.map.on('locationfound', this.onLocationFound);
          this.map.on('locationerror', this.onLocationError);
    
          // Draw the map
          this.map.locate({
            setView: true,
            maxZoom: 16
          });
        }
    
        // When location is found, draw a popup with the current location and show how accurate it is.
        // Then get the server data.
        Geolocation.prototype.onLocationFound = function(e) {
          var radius;
          radius = e.accuracy / 2;
          L.marker(e.latlng).addTo(this.map).bindPopup("You are within " + radius + " meters from this point").openPopup();
          L.circle(e.latlng, radius).addTo(this.map);
          return this.getServerData(e);
        };
    
        // When something goes wrong getting location data, just show an error message
        Geolocation.prototype.onLocationError = function(e) {
          return alert(e.message);
        };
    
        // Fetch remote geojson data and pass it to the plotting function
        Geolocation.prototype.getServerData = function(e) {
          var latlng;
          latlng = e.latlng;
          return $.getJSON("http://www.mijndomein.com/geoloc-json+" + latlng.lat + "+" + latlng.lng, this.plotServerData);
        };
    
        // Plot the server geojson data on the map
        Geolocation.prototype.plotServerData = function(data) {
          var geojson;
          geojson = L.geoJson(data, {
            onEachFeature: function(feature, layer) {
              return layer.bindPopup(feature.properties.name);
            }
          });
          return geojson.addTo(this.map);
        };
    
        return Geolocation;
    
      })();
    
      // Instantiate the function
      geolocation = new Geolocation('map');
      </script>
    </body>
    </html>
    no votes  

  3. #3

    Registered
    02/10/13
    Location
    Adinkerke
    Posts
    116
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0
    Quote Originally Posted by bealzebub View Post
    This quote is hidden because you are ignoring this member. Show
    Zoiets:

    Code:
    <html>
    <head>
      <script type="text/javascript">var NREUMQ=NREUMQ||[];NREUMQ.push(["mark","firstbyte",new Date().getTime()]);</script>
    <title>Leaflet map</title>
      <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
    </head>
    <body>
    
      <h1>Leaflet Map</h1>
      <div id="map" style="height:1000px"></div>
    
      <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
      <script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
    
      <script type="text/javascript" charset="utf-8">
      "use strict";
    
      // Let's do this the right way and encapsulate the geolocation drawing in its own object
      // This is just a lot cleaner and doesn't pollute the global namespace.
      // Polluting the global namespace (window) is just lazy and can only lead to problems
      // further down the road (when you accidentally reuse the same variable for example)
    
      var Geolocation, geolocation,
        __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
    
      Geolocation = (function() {
        // Constructor
        function Geolocation(element) {
          // Bind all functions to the Geolocation function
          this.plotServerData = __bind(this.plotServerData, this);
          this.getServerData = __bind(this.getServerData, this);
          this.onLocationError = __bind(this.onLocationError, this);
          this.onLocationFound = __bind(this.onLocationFound, this);
    
          // Tiles generator
          var myTiles;
          myTiles = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 18
          });
          this.map = L.map(element);
          myTiles.addTo(this.map);
    
          // Event callbacks
          this.map.on('locationfound', this.onLocationFound);
          this.map.on('locationerror', this.onLocationError);
    
          // Draw the map
          this.map.locate({
            setView: true,
            maxZoom: 16
          });
        }
    
        // When location is found, draw a popup with the current location and show how accurate it is.
        // Then get the server data.
        Geolocation.prototype.onLocationFound = function(e) {
          var radius;
          radius = e.accuracy / 2;
          L.marker(e.latlng).addTo(this.map).bindPopup("You are within " + radius + " meters from this point").openPopup();
          L.circle(e.latlng, radius).addTo(this.map);
          return this.getServerData(e);
        };
    
        // When something goes wrong getting location data, just show an error message
        Geolocation.prototype.onLocationError = function(e) {
          return alert(e.message);
        };
    
        // Fetch remote geojson data and pass it to the plotting function
        Geolocation.prototype.getServerData = function(e) {
          var latlng;
          latlng = e.latlng;
          return $.getJSON("http://www.mijndomein.com/geoloc-json+" + latlng.lat + "+" + latlng.lng, this.plotServerData);
        };
    
        // Plot the server geojson data on the map
        Geolocation.prototype.plotServerData = function(data) {
          var geojson;
          geojson = L.geoJson(data, {
            onEachFeature: function(feature, layer) {
              return layer.bindPopup(feature.properties.name);
            }
          });
          return geojson.addTo(this.map);
        };
    
        return Geolocation;
    
      })();
    
      // Instantiate the function
      geolocation = new Geolocation('map');
      </script>
    <script type="text/javascript">if(!NREUMQ.f){NREUMQ.f=function(){NREUMQ.push(["load",new Date().getTime()]);var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://js-agent.newrelic.com/nr-100.js";document.body.appendChild(e);if(NREUMQ.a)NREUMQ.a();};NREUMQ.a=window.onload;window.onload=NREUMQ.f;};NREUMQ.push(["nrf2","beacon-1.newrelic.com","d294042fdc","727136","NAFbYBBVCBZVAEFaWA1LbEYLG0w=",0,107,new Date().getTime()]);</script>
    </body>
    </html>
    Dit is een serieuze boterham.
    De geolocatie-functie werkt met jou code, maar de geoJSON werkt nog niet.

    Is er geen eenvoudigere manier om de lat en lng variabelen over te brengen naar de geoJSON url?
    no votes  

  4. #4
    bealzebub's Avatar
    Registered
    28/06/06
    Location
    Gent
    Posts
    376
    iTrader
    1 (100%)
    Mentioned
    0 Post(s)
    Quote Originally Posted by ctuxboy View Post
    This quote is hidden because you are ignoring this member. Show
    Dit is een serieuze boterham.
    De geolocatie-functie werkt met jou code, maar de geoJSON werkt nog niet.

    Is er geen eenvoudigere manier om de lat en lng variabelen over te brengen naar de geoJSON url?
    Geen idee, da hangt van jouw backend af hé, ik weet nie hoe die in mekaar zit.

    Maar ik heb al een donkerbruin vermoeden waarom het "niet lukt", want ik ben zeker dat het werkt (ik heb het hier met een geojson dataset getest).

    Jouw dingske hier draait op http://eerste-domein.be/ (of nog erger: je doet het open via een file:// url) en je wil je geojson data afhalen van http://tweede-domein.be/ via die getJSON (wat een AJAX call is). Da kan dus nie: Same-origin policy - Wikipedia, the free encyclopedia Ofwel heb je natuurlijk gewoon die URL in de code nie aangepast (want ik veronderstel dat die mijndomein.com nie echt jouw server URL is), da zou wel nie echt slim zijn.

    Je hebt twee mogelijkheden: ofwel zorg je dat je backend JSONP ondersteuning heeft, ofwel zorg je voor CORS ondersteuning. Dat gaat van de veronderstelling uit dat je controle hebt over die geojson backend server.

    De derde optie is dat je op je eigen backend die remote data afhaalt en die gewoon rechtstreeks in de pagina rendert.

    T is echt wel basic Javascript stuff allemaal, dus desnoods ga je gewoon een deftig Javascript boek moeten doornemen en veel oefenen.
    Last edited by bealzebub; 22-04-2014 at 22:36.
    no votes  

  5. #5

    Registered
    02/10/13
    Location
    Adinkerke
    Posts
    116
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0
    Dit is de pagina waarmee ik aan het experimenteren ben:
    http://park.market-locator.com/geolocation

    Dit is een nieuwe pagina die ik heb aangemaakt met jou code:
    http://park.market-locator.com/content/geo

    Hier de link naar de JSON gegevens (zonder variables: distance, lat, lng, ...):
    http://park.market-locator.com/geoloc-json

    Al dit werkt in een Drupal omgeving.

    Hier de aangepaste geoJSON-url uit jou code:
    [code]
    ...
    return jquery.getJSON("http://park.market-locator.com/geoloc-json?distance[distance]=+1&distance[unit]=6371&distance[origin]=" + latlng.lat + "+" + latlng.lng, this.plotServerData);
    ...
    [code]

    Misschien kun je me hiermee verder helpen.


    Ik heb wel enkele Javascript/jQuery boeken, en zal ze toch eens van onder het stof moeten halen.
    no votes  

  6. #6
    bealzebub's Avatar
    Registered
    28/06/06
    Location
    Gent
    Posts
    376
    iTrader
    1 (100%)
    Mentioned
    0 Post(s)
    En de javascript console zegt:

    Uncaught ReferenceError: jquery is not defined

    Je hebt dus "jquery" ipv "jQuery" ergens getypt. En dat zal waarschijnlijk ook het enige zijn dat je aan m'n code hebt veranderd
    Last edited by bealzebub; 22-04-2014 at 23:18.
    no votes  

  7. #7

    Registered
    02/10/13
    Location
    Adinkerke
    Posts
    116
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0
    Ah ok. Bedankt.
    Zal dit morgen eens bekijken.
    Ik hou je op de hoogte :-)


    Verstuurd vanaf mijn HUAWEI Y300-0100 met Tapatalk
    no votes  

  8. #8

    Registered
    02/10/13
    Location
    Adinkerke
    Posts
    116
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0
    Quote Originally Posted by bealzebub View Post
    This quote is hidden because you are ignoring this member. Show
    En de javascript console zegt:

    Uncaught ReferenceError: jquery is not defined

    Je hebt dus "jquery" ipv "jQuery" ergens getypt. En dat zal waarschijnlijk ook het enige zijn dat je aan m'n code hebt veranderd
    Zoals belooft ging ik je op de hoogte houden.

    'Stomme' fout verwijdert naar 'jQuery

    Dit werkt inderdaad!

    Super bedankt!
    no votes  

  9. #9

    Registered
    02/10/13
    Location
    Adinkerke
    Posts
    116
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0
    Zal nu wel eens proberen je code te ontleden.
    no votes  

  10. #10
    bealzebub's Avatar
    Registered
    28/06/06
    Location
    Gent
    Posts
    376
    iTrader
    1 (100%)
    Mentioned
    0 Post(s)
    Quote Originally Posted by ctuxboy View Post
    This quote is hidden because you are ignoring this member. Show
    Zoals belooft ging ik je op de hoogte houden.

    'Stomme' fout verwijdert naar 'jQuery
    Twee dt-fouten op twee zinnen

    Quote Originally Posted by ctuxboy View Post
    This quote is hidden because you are ignoring this member. Show
    Zal nu wel eens proberen je code te ontleden.
    Daarom dat er commentaar bij alles staat

    Je moet het bezien als (één van de) Javascript manieren om een "class" te definiëren (encapsulation in OO programming é). T is de manier die ik het properste vind, omda je altijd weet waar je alles zal terugvinden (bv. die function binding).
    no votes  

  11. #11

    Registered
    02/10/13
    Location
    Adinkerke
    Posts
    116
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0
    Quote Originally Posted by bealzebub View Post
    This quote is hidden because you are ignoring this member. Show
    Twee dt-fouten op twee zinnen
    Nooit goed geweest in spelling. Nobody is perfect

    Quote Originally Posted by bealzebub View Post
    This quote is hidden because you are ignoring this member. Show
    Daarom dat er commentaar bij alles staat

    Je moet het bezien als (één van de) Javascript manieren om een "class" te definiëren (encapsulation in OO programming é). T is de manier die ik het properste vind, omda je altijd weet waar je alles zal terugvinden (bv. die function binding).
    Yup, heb ik gezien, handig!

    Ik veronderstel dat je developer bent van beroep? Of toch opleiding gevolgd in deze richting?
    no votes  

  12. #12
    bealzebub's Avatar
    Registered
    28/06/06
    Location
    Gent
    Posts
    376
    iTrader
    1 (100%)
    Mentioned
    0 Post(s)
    Quote Originally Posted by ctuxboy View Post
    This quote is hidden because you are ignoring this member. Show
    Ik veronderstel dat je developer bent van beroep? Of toch opleiding gevolgd in deze richting?
    Ja en nee Totaal andere opleiding gevolgd, maar in development gerold en erin blijven hangen Je leert gewoon enorm veel door zelf dingen te maken ipv voorgekauwde brokken aan mekaar te lijmen.
    no votes  

  13. #13

    Registered
    02/10/13
    Location
    Adinkerke
    Posts
    116
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0
    Quote Originally Posted by bealzebub View Post
    This quote is hidden because you are ignoring this member. Show
    Ja en nee Totaal andere opleiding gevolgd, maar in development gerold en erin blijven hangen Je leert gewoon enorm veel door zelf dingen te maken ipv voorgekauwde brokken aan mekaar te lijmen.
    Dit klopt wat je zegt. Je ziet wel dat je van één en ander op de hoogte bent ;-)

    Ik probeer ook wel mijn plan te trekken, maar zonder opleiding is het moeilijk. Uw code zal wel beter zijn, maar begrijp beter wat ik getypt heb, dan Uw 'overzichtelijke' code.

    Voor u is dit 'kinderspel', maar zo ver gevorderd ben ik niet :-s
    no votes  

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Log in

Log in