0

Updated after first comment:

I'm webmapping nube and am trying to make a webmap using leaflet and am not sure where to go. I've been follwing this tutorial from Penn State: Geog 585 Leaflet walkthrough replacing the data provided with my own. Here's my code so far:

<!DOCTYPE html>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Residential Garbage - Monday</title>
        <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css" type="text/css">
        <link rel="stylesheet" href="style.css" type="text/css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.js" crossorigin=""></script>
        <script src="ResiGarbMonday.js"></script>
        <link rel="stylesheet" href="style.css" type="text/css">

        <script type="text/javascript"> 
        var map;
        function init() {
          map = new L.map('map');
          map.setView([37.39,-122.086],12);

             // Add the tiled layer
            var tiles = L.tileLayer("../CO_054/OSM_BaseMap/OSM_BaseMap/${z}/${x}/${y}.png", {attribution: "Data copyright OpenStreetMap contributors"});
            tiles.addTo(map);

            var mondayLayer;

            var selection;
            var selectedLayer;



          // Set up symbols for gardens
            // Purple symbol for unselected gardens
            function mondayStyle(feature) {
              return {
                fillColor:'#ff00ff',
                fillOpacity: 1,
                color: '#B04173',
              };
            }

            function mondaySelectedStyle(feature) {
              return {
                fillColor: "00FFFB",
                color: '#0000FF',
                fillOpacity: 1
              };
            }

            // handle click events on the garden features
            function garbageOnEachFeature(feature, layer){
              layer.on({
                click: function(e) {
                    if (selection) {            
                      resetStyles();
                    }

                    e.target.setStyle(mondaySelectedStyle());
                    selection = e.target;
                    selectedLayer = mondayLayer;

                    // Insert some HTML with the feature name
                    buildSummaryLabel(feature);

                    L.DomEvent.stopPropagation(e); // stop click from being further propagated
                  }
                });
              }

              // add layer

              var mondayLayer = new L.geoJSON(mondayData, {
                style: mondayStyle,
                onEachFeature: garbageOnEachFeature
              });

              mondayLayer.addTo(map);

    map.setCenter(new OpenLayers.LonLat(-122.086, 37.39).transform(fromProjection,toProjection), 11);

    // Listen for feature selection and unselection events.

  </script>
   </head>
   <body onload="init()">
     <h1 id="title">Mountain View - Residential Garbage</h1>
     <div id="map" class="smallmap"></div>
     <div id="summaryLabel">
         <p>Click a red (Monday) or blue (Tuesday) service location on the map to get more information.</p>
     </div>
    </body>
  </html>

Right now I would just be happy to see the geoJSON show up on top of the tiles. I may be having a problem at the top of the script at tag. The tuorial provides a js file which essentially takes geoJSON and turns it into a variable referenced later in the HTML. I made my own by exporting a shapefile in QGIS as geoJSON and simply rearranging the crs and feature collection lines and then definging a variable at the head of it. Here's the beginning and first feature from the script

var mondayData = {"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" }}, "type": "FeatureCollection",
"features": [
{ "type": "Feature", "properties": { "Account_ID": "999999", "Address_ID": "9999", "Customer_N": "UUUUUUU", "Address": "8888 XXX", "City": "YOUR CITY", "Exist_Part": "1", "Exist_Rout": "999", }, "geometry": { "type": "Point", "coordinates": [ -129.1109869770321, 62.405436602116083 ] } }

My div for the map display shows up with a grey background as well as the title and instructions on the bottom but no features or tiles.

here is the error in the console:

Uncaught TypeError: Cannot read property 'addLayer' of undefined
    at e.addTo (leaflet.js:6)
    at ResGarbGeoJ23.html:74
  • 2
    Web development can be really aided by using your browser's developer tools. You should check out that console, which will point to your major issues. The first is that the definition for init doesn't have a closing '}'. Add that. Second problem is that the div has the id map, not mapid like you are using to initialize the leaflet Map. There might be more but those were two issues I saw right away. – Logan Byers Aug 18 '17 at 2:46
  • @Logan B Made your corrections and got a big grey div,Progress! I was thrilled to see something other than a big white space. I checked out the conole afterwards and am seeing that the tile are note being found and this: Uncaught TypeError: Cannot read property 'addLayer' of undefined at e.addTo (leaflet.js:6) at ResGarbGeoJ23.html:74 – geoJshaun Aug 19 '17 at 6:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.