GeoJson object as Leaflet Markers - leaflet

Question

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: 'OpenStreetMap'
}).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!

Answer 1

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).

Answer 2

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);