CODEWITHSUNDEEP
leafletgeojson
Gion Mors
Gion Mors

Reputation: 295

GeoJson object as Leaflet Markers

I am trying to visualize a Leaflet Marker based on a json file stored in gist. So far, I do not manage, since my web map (http://geo.uzh.ch/~gboo/netap/netap.html) shows the base map only and not the marker.

When I inspect the webpage in Firefox, it gives me this error:

TypeError: undefined is not a function (near '...}).addTo(map);...')

Here the code snipet:

$(document).ready(function() {

var map = L.map('map', { 
            center: [46.798333, 8.231944], 
            zoom: 8,    
            minZoom: 9,
            maxZoom: 16,
            zoomControl:true
        });

        L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '<a href="http://openstreetmap.org">OpenStreetMap</a>' 
        }).addTo(map)   


    $.getJSON("https://gist.githubusercontent.com/netapschweiz/13d37c1ee99e2c052246/raw/f64297e6bc783c1af5844921012116703fd37e0d/map.geojson", {
        pointToLayer: function(feature, latlng) {
            var smallIcon = L.icon({
                      iconSize: [27, 27],
                      iconAnchor: [13, 27],
                      popupAnchor:  [1, -24],
                      iconUrl: 'www.geo.uzh.ch/~gboo/netap/img/catMarker.png'
                      });
                      return L.marker(latlng, smallIcon);
    }
}).addTo(map);
});

Could someone help me? Many thanks!

Upvotes: 1

Views: 373

Answers (2)

Gion Mors
Gion Mors

Reputation: 295

That's the way to go:

  var geojsonMarkerOptions = L.icon({
        iconUrl: 'http://',
        iconSize:     [30, 30],
        iconAnchor:   [15, 15],
        popupAnchor:  [0, -15]
    });

    $.getJSON('http://', function(data) {
            L.geoJson(data, {
        pointToLayer: function (feature, latlng) {
            return L.marker(latlng, {icon: geojsonMarkerOptions})
        }})
    }).addTo(map);

Upvotes: 1

tmcw
tmcw

Reputation: 11882

It looks like the core of your confusion is thinking that $.getJSON has some relationship to L.geoJson. It doesn't: $.getJSON is a jQuery function that fetches data, L.geoJson is a Leaflet function that puts data on the map. To fix this code, you'll need to read the jQuery docs for $.getJSON (that explain that you need to supply a callback as the second argument) and the Leaflet docs for L.geoJson (that explain that you need to supply data as the first argument).

Upvotes: 2

Related Questions