Simple topo map shows nothing

[nickkhoury]

Can someone please explain or get this simple example to work? All I see is a blank space where the map should be. https://jsfiddle.net/5m9a67k2/1/

[dawid.d]

Hi there!

Welcome to our forum and thanks for the question!

It looks like there are a few issues in your code that need to be fixed for the map to display properly. Here are some steps that might help:

1. Move id to properties – If you're using joinBy to reference id, it should be in the properties of each map object.
2. Add keys in the configuration – Missing keys could cause rendering issues. Including it in your configuration ensures that data is mapped correctly.
3. Using mapline for LineString – If you’re using a geometry type LineString, you’ll need to change the series type to mapline. Alternatively, if you choose a geometry type like polygon, then the series type can be map.
4. Adjust coordinates – The current coordinates don’t seem to work properly in this setup, and it’s unclear what they represent. It might help to start with simpler geometry to see the effect on the map.

For reference, you can try this live demo: https://jsfiddle.net/BlackLabel/fyab4vn5/
In this configuration, you can see which point corresponds to which location, which should help you understand how the code works.

Good luck!

[nickkhoury]

Thank you, that does work for me. Those are GPS coordinates, if you paste the below geojson into https://geojson.io/, you will see a rectangle at that point. So does that mean it is too small since you changed the GPS coordinates to integers? Or what why does it not show up when I view it in the highcharts map?

Code: Select all

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "coordinates": [
          [
            [
              -122.35060091218517,
              47.623077930158416
            ],
            [
              -122.35060091218517,
              47.62277974814543
            ],
            [
              -122.34998423050754,
              47.62277974814543
            ],
            [
              -122.34998423050754,
              47.623077930158416
            ],
            [
              -122.35060091218517,
              47.623077930158416
            ]
          ]
        ],
        "type": "Polygon"
      }
    }
  ]
}

[dawid.d]

It looks like there is too small a difference in values ​​for the default generated mapview. I set custom and now it displays correctly.

Demo: https://jsfiddle.net/BlackLabel/y6wx91nv/