CODEWITHSUNDEEP
javascriptpythonhtmlleafletgeojson
Nuclear7740
Nuclear7740

Reputation: 11

Remove Geojson Keys double quotes for use in Javascript var/const in Leaflet map

I'm currently working on a map with points where they can be clicked on to show data in a popup from the geojson file. I was using Folium but am working now on using an html file.

I found a good template for my needs but the geosjson file in the template has no quotes in the keys.

This json format works:

const data = {
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      geometry: {
        type: "Point",
        coordinates: [-78.7981148, 23.87672025],
      },
      properties: {
        FIELD1: 0,
        ACCOUNT_STATUS: "CONNECTED",
        CITY: "CITY",
        COUNTY: "COUNTY",
        ONT: "ONT",
        HAS_ELECTRIC: "NO",
        MBRSEP: 123456789,
        NAME: "JOHN SMITH",
        PLANNAME: "100 MBPS",
        SERV_TYPE: "RESIDENTIAL",
        STATE: "XX",
        SVC_ADDRESS: "123 Main St",
        ZIP: 55555,
        Remote_ID: "10@1/3/7",
        Status: "Online",
        Light: "-26.9|2.2",
        TA5K: "NODE 2",
      },
    },

I used this tool to take a csv and convert to geojson.

This json format does not work when set as const or var:

const data = {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "": "0",
        "ACCOUNT_STATUS": "CONNECTED",
        "CITY": "CITY",
        "COUNTY": "COUNTY",
        "ONT": "ADTN04010001",
        "HAS_ELECTRIC": "NO",
        "MBRSEP": "123456789",
        "NAME": "JOHN SMITH",
        "PLANNAME": "100 MBPS",
        "SERV_TYPE": "RESIDENTIAL",
        "STATE": "XX",
        "SVC_ADDRESS": "123 MAIN ST",
        "ZIP": "55555",
        "Remote_ID": "10@1/3/7",
        "Status": "Online",
        "Light": "-26.9|2.2",
        "BIP_Errors": "0|1",
        "TA5K": "NODE 2"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -78.7981148,
          23.87672025
        ]
      }
    },

Here is the section in the HTML file the references the .js file with this geojson data:

<!-- geojson data  -->
<script src="./data.js"></script>

<!-- leaflet js  -->
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

<!-- markercluster  -->
<script src="./dist/leaflet.markercluster.js"></script>

<script>
  const map = L.map("map").setView([43.14232, -78.98864], 11);
  const osm = L.tileLayer(
    "https://mt1.google.com/vt/lyrs=m&x={x}&y={y}&z={z}",
    {
      maxZoom: 19,
      attribution:
        '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
    }
  ).addTo(map);

  const geojsonMarkerOptions = {
    radius: 8,
    fillColor: "#ff7800",
    color: "#000",
    weight: 1,
    opacity: 1,
    fillOpacity: 0.8,
  };

  // loading geojson
  const lightData = L.geoJSON(data, {
    onEachFeature: function (feature, layer) {
      const popupContent =
        '<h4 class = "text-primary">' +
        feature.properties.NAME +
        "</h4>" +
        '<div class="container"><table class="table table-striped">' +
        "<thead><tr><th>Properties</th><th>Value</th></tr></thead>" +
        "<tbody><tr><td> NAME </td><td>" +
        feature.properties.NAME +
        "</td></tr>" +
        "<tr><td>MBRSEP </td><td>" +
        feature.properties.MBRSEP +
        "</td></tr>";
      layer.bindPopup(popupContent);
    },
    pointToLayer: function (feature, latlng) {
      return L.circleMarker(latlng, geojsonMarkerOptions);
    },
  });

  const markers = L.markerClusterGroup().addLayer(lightData);

  // marker clustering
  map.addLayer(markers);
</script>

Can this data be read directly as a geojson file in the html file rather than a JS script?

What is the standard simple method in these cases for this task?

I've attempted some scripts to remove the double quotes from the keys but those haven't worked yet, i could absolutely be implementing it wrong though.

Eventually I intend to learn and use an API for this data but i'm just trying to use the raw data at this time.

Upvotes: 1

Views: 137

Answers (1)

Nuclear7740
Nuclear7740

Reputation: 11

I found what i needed here:

https://gis.stackexchange.com/questions/436887/python-from-geojson-to-js-file

Part of my issue was partially on how VS Code was formatting my json file after changing the file format to JS, making the issue more difficult to discern.

Upvotes: 0

Related Questions