So how do I fix this error? "Uncaught ReferenceError: L is not defined" var map = L.map("map").setView([60.201424, 24.934037], 12);

Here is the rest of the Javascript:

var map = L.map("map").setView([60.201424, 24.934037], 12);

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

    var layergroup = L.layerGroup().addTo(map);
    var activeMarker;

    $("#addmarker").click(function() {

        var mapCenter = map.getCenter();

        var geojsonFeature = {
            "type": "Feature",
            "properties": {
                "name": "",
                "typ": "nur",
                "reichweite": ""
            },
            "geometry": {
                "type": "Point",
                "coordinates": [mapCenter.lat, mapCenter.lng]
            }
        };

        var geojsonlayer = L.geoJson(geojsonFeature, {

            pointToLayer: function(feature, latlng) {
                var marker = L.marker(map.getCenter(), {
                    draggable: true,
                }).bindPopup("<div id='titel'>Unbenannter Marker</div><input type='button' value='Delete Marker' class='marker-delete-button'/><br><p>Name:<input type='text' id='setname'/><button class='trigger'>Say hi</button>");

                marker.on("popupopen", onPopupOpen);

                return marker;
            }
        });

        layergroup.addLayer(geojsonlayer.getLayers()[0]); // use the only marker instead of the GeoJSON layer.

    });

    // Function to handle delete as well as other events on marker popup open
    function onPopupOpen() {

        activeMarker = this;

        $(".marker-delete-button:visible").click(function() {
            layergroup.removeLayer(activeMarker);
            activeMarker = null;
        });

        $("#setname").val(activeMarker.feature.properties.name).change(modifyName);
    }

    function modifyName(event) {
        var newName = event.currentTarget.value;

        activeMarker.feature.properties.name = newName;
    }

    function getAllMarkers() {
        /*var allMarkersObjArray = []; //new Array();
        var allMarkersGeoJsonArray = []; //new Array();

        $.each(map._layers, function(ml) {
          //console.log(map._layers)
          if (map._layers[ml].feature && map._layers[ml].feature.properties.typ == "nur") {

            allMarkersObjArray.push(this);
            allMarkersGeoJsonArray.push(JSON.stringify(this.toGeoJSON()));
          }
        })*/

        var allMarkersObjArray = layergroup.getLayers();
        var allMarkersGeoJsonArray = [];

        layergroup.eachLayer(function(layer) {
            allMarkersGeoJsonArray.push(JSON.stringify(layer.toGeoJSON()));
            // You could also have used layergroup.toGeoJSON(), but it would have given a FeatureCollection, whereas here you get an array of Feature's.
        });

        console.log(allMarkersObjArray);
        alert("Anzahl Markers : " + allMarkersGeoJsonArray.length + "\n\n" + allMarkersGeoJsonArray + "\n\n");
    }

    $("#getAllMarkers").click(function() {
        getAllMarkers();
    });
</script>

So I am trying to make an app where u click the map and insert a marker with a message.

So how do I fix this error? "Uncaught ReferenceError: L is not defined" var map = L.map("map").setView([60.201424, 24.934037], 12);

Here is the rest of the Javascript:

var map = L.map("map").setView([60.201424, 24.934037], 12);

    L.tileLayer('http://{s}.tile.osm/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    var layergroup = L.layerGroup().addTo(map);
    var activeMarker;

    $("#addmarker").click(function() {

        var mapCenter = map.getCenter();

        var geojsonFeature = {
            "type": "Feature",
            "properties": {
                "name": "",
                "typ": "nur",
                "reichweite": ""
            },
            "geometry": {
                "type": "Point",
                "coordinates": [mapCenter.lat, mapCenter.lng]
            }
        };

        var geojsonlayer = L.geoJson(geojsonFeature, {

            pointToLayer: function(feature, latlng) {
                var marker = L.marker(map.getCenter(), {
                    draggable: true,
                }).bindPopup("<div id='titel'>Unbenannter Marker</div><input type='button' value='Delete Marker' class='marker-delete-button'/><br><p>Name:<input type='text' id='setname'/><button class='trigger'>Say hi</button>");

                marker.on("popupopen", onPopupOpen);

                return marker;
            }
        });

        layergroup.addLayer(geojsonlayer.getLayers()[0]); // use the only marker instead of the GeoJSON layer.

    });

    // Function to handle delete as well as other events on marker popup open
    function onPopupOpen() {

        activeMarker = this;

        $(".marker-delete-button:visible").click(function() {
            layergroup.removeLayer(activeMarker);
            activeMarker = null;
        });

        $("#setname").val(activeMarker.feature.properties.name).change(modifyName);
    }

    function modifyName(event) {
        var newName = event.currentTarget.value;

        activeMarker.feature.properties.name = newName;
    }

    function getAllMarkers() {
        /*var allMarkersObjArray = []; //new Array();
        var allMarkersGeoJsonArray = []; //new Array();

        $.each(map._layers, function(ml) {
          //console.log(map._layers)
          if (map._layers[ml].feature && map._layers[ml].feature.properties.typ == "nur") {

            allMarkersObjArray.push(this);
            allMarkersGeoJsonArray.push(JSON.stringify(this.toGeoJSON()));
          }
        })*/

        var allMarkersObjArray = layergroup.getLayers();
        var allMarkersGeoJsonArray = [];

        layergroup.eachLayer(function(layer) {
            allMarkersGeoJsonArray.push(JSON.stringify(layer.toGeoJSON()));
            // You could also have used layergroup.toGeoJSON(), but it would have given a FeatureCollection, whereas here you get an array of Feature's.
        });

        console.log(allMarkersObjArray);
        alert("Anzahl Markers : " + allMarkersGeoJsonArray.length + "\n\n" + allMarkersGeoJsonArray + "\n\n");
    }

    $("#getAllMarkers").click(function() {
        getAllMarkers();
    });
</script>

So I am trying to make an app where u click the map and insert a marker with a message.

• javascript
• google-maps
• cordova
• phonegap
• marker

1 Answer 1

I'm assuming, that you are using leafletjs library to render that map.

Please make sure that you've prepared your page before started, following this guide: https://leafletjs./examples/quick-start/

So, you will need to include into your page:

• css file;
• js file;
• add <div id="map"></div> into body of your page;
• and only afterward add your code.

Enjoy!