Thread: Geolocation + Leaflet + GeoJSON
-
22-04-2014, 16:04 #1
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
-
-
22-04-2014, 19:19 #2
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
-
22-04-2014, 21:47 #3no votes
-
22-04-2014, 22:25 #4
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
-
22-04-2014, 23:09 #5
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
-
22-04-2014, 23:12 #6
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
-
22-04-2014, 23:45 #7
Ah ok. Bedankt.
Zal dit morgen eens bekijken.
Ik hou je op de hoogte :-)
Verstuurd vanaf mijn HUAWEI Y300-0100 met Tapatalkno votes
-
23-04-2014, 22:04 #8no votes
-
23-04-2014, 22:11 #9
Zal nu wel eens proberen je code te ontleden.
no votes
-
23-04-2014, 22:55 #10
Twee dt-fouten op twee zinnen

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
-
25-04-2014, 22:21 #11
Nooit goed geweest in spelling. Nobody is perfect

Yup, heb ik gezien, handig!
Ik veronderstel dat je developer bent van beroep? Of toch opleiding gevolgd in deze richting?no votes
-
26-04-2014, 11:17 #12no votes
-
29-04-2014, 15:18 #13
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 :-sno votes

