# Worldmap with GeoJSON

**URL:** <https://discourse.nodered.org/t/worldmap-with-geojson/26031>\
**Category:** Dashboard\
**Created:** [3 May 2020 22:54 UTC](https://discourse.nodered.org/t/worldmap-with-geojson/26031 "2020-05-03T22:54:19Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![renlefche](https://avatars.discourse-cdn.com/v4/letter/r/43a26b/32.png) [@renlefche](https://discourse.nodered.org/u/renlefche)\
**Post date:** [3 May 2020 22:54 UTC](https://discourse.nodered.org/t/worldmap-with-geojson/26031/1 "2020-05-03T22:54:20Z")

</div>

I am trying to change the color of GeoJSON LineString and put it into a separate layer using the worldmap node.  
For some reason I can't make this work - see below. What am I doing wrong?  
{  
"payload": {  
"type": "LineString",  
"color": "#0000ff",  
"layer": "layer1",  
"coordinates": [[10, 11],[20, 21]]  
}  
}

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [3 May 2020 22:58 UTC](https://discourse.nodered.org/t/worldmap-with-geojson/26031/2 "2020-05-03T22:58:10Z")

</div>

Surround the colour value in quotes

---

<div class="post-metadata">

**Author:** ![renlefche](https://avatars.discourse-cdn.com/v4/letter/r/43a26b/32.png) [@renlefche](https://discourse.nodered.org/u/renlefche)\
**Post date:** [3 May 2020 23:59 UTC](https://discourse.nodered.org/t/worldmap-with-geojson/26031/3 "2020-05-03T23:59:53Z")

</div>

Thank you for the tip - I still get default dark red color. Any other ideas?

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [4 May 2020 00:23 UTC](https://discourse.nodered.org/t/worldmap-with-geojson/26031/4 "2020-05-04T00:23:58Z")

</div>

Actually, I thought you were talking about a line. I have no idea what linestring is? Its not mentioned in the [read me](https://flows.nodered.org/node/node-red-contrib-web-worldmap).

---

<div class="post-metadata">

**Author:** ![renlefche](https://avatars.discourse-cdn.com/v4/letter/r/43a26b/32.png) [@renlefche](https://discourse.nodered.org/u/renlefche)\
**Post date:** [4 May 2020 01:31 UTC](https://discourse.nodered.org/t/worldmap-with-geojson/26031/5 "2020-05-04T01:31:32Z")

</div>

Thank you Steve for looking into this. LineString is a GeoJSON type. GeoJSON is supported in worldmap per the readme and it also claims that I can change color etc. , but I can't make it work .....

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [4 May 2020 09:04 UTC](https://discourse.nodered.org/t/worldmap-with-geojson/26031/6 "2020-05-04T09:04:34Z")

</div>

the geojson object needs to be a property within the payload. Also there is no default way of styling geojson within the spec so again we apply that from the level outside the geojson. For example

```auto
{
    "name": "Myline",
    "color": "#0000ff",
    "layer": "layer1",
    "geojson": {
        "type": "LineString",
        "coordinates": [
            [
                10,
                11
            ],
            [
                20,
                21
            ]
        ]
    }
}

```

---

<div class="post-metadata">

**Author:** ![renlefche](https://avatars.discourse-cdn.com/v4/letter/r/43a26b/32.png) [@renlefche](https://discourse.nodered.org/u/renlefche)\
**Post date:** [4 May 2020 14:03 UTC](https://discourse.nodered.org/t/worldmap-with-geojson/26031/7 "2020-05-04T14:03:10Z")

</div>

Thank you for the input - it makes perfect sense and does change the color of the LineString now. The layer is also generated and I can check/uncheck it in worldmap. However it appears that the LineString is not part of that "layer1" because the LineString stays visible even when I uncheck "layer1". Am I missing something?

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [4 May 2020 18:21 UTC](https://discourse.nodered.org/t/worldmap-with-geojson/26031/8 "2020-05-04T18:21:28Z")

</div>

Hmmmm needs more work I think.

---

<div class="post-metadata">

**Author:** ![renlefche](https://avatars.discourse-cdn.com/v4/letter/r/43a26b/32.png) [@renlefche](https://discourse.nodered.org/u/renlefche)\
**Post date:** [4 May 2020 22:02 UTC](https://discourse.nodered.org/t/worldmap-with-geojson/26031/9 "2020-05-04T22:02:04Z")

</div>

ok - let me know how I can help...

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [4 May 2020 22:13 UTC](https://discourse.nodered.org/t/worldmap-with-geojson/26031/10 "2020-05-04T22:13:59Z")

</div>

If you could find me an extra couple of hours a day - that would be great 🙂

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [5 May 2020 22:38 UTC](https://discourse.nodered.org/t/worldmap-with-geojson/26031/11 "2020-05-05T22:38:43Z")

</div>

version 2.3.9 should now hopefully be a lot better behaved with geojson "layers"

---

<div class="post-metadata">

**Author:** ![renlefche](https://avatars.discourse-cdn.com/v4/letter/r/43a26b/32.png) [@renlefche](https://discourse.nodered.org/u/renlefche)\
**Post date:** [6 May 2020 00:06 UTC](https://discourse.nodered.org/t/worldmap-with-geojson/26031/12 "2020-05-06T00:06:50Z")

</div>

Thank you for staying on top of this!  
I'll keep a look out for version 2.3.9 - just updated to version 2.3.8 a min. ago....

---

<div class="post-metadata">

**Author:** ![renlefche](https://avatars.discourse-cdn.com/v4/letter/r/43a26b/32.png) [@renlefche](https://discourse.nodered.org/u/renlefche)\
**Post date:** [12 May 2020 23:00 UTC](https://discourse.nodered.org/t/worldmap-with-geojson/26031/13 "2020-05-12T23:00:00Z")

</div>

Just updated to version 2.3.10 and it works great! Thank you very much.

---

<div class="post-metadata">

**Author:** ![johnwalicki](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/johnwalicki/32/8848_2.png) [@johnwalicki](https://discourse.nodered.org/u/johnwalicki)\
**Post date:** [28 May 2020 01:53 UTC](https://discourse.nodered.org/t/worldmap-with-geojson/26031/14 "2020-05-28T01:53:20Z")

</div>

@dceejay  
I stumbled on this geojson styling issue too. Didn't think to read this forum first however. I expected the geojson to respect the defacto Mapbox SimpleStyle spec

> **[mapbox/simplestyle-spec](https://github.com/mapbox/simplestyle-spec/tree/master/1.1.0)**
>
> A simple styling convention for GeoJSON data. Contribute to mapbox/simplestyle-spec development by creating an account on GitHub.

  
[https://help.github.com/en/github/managing-files-in-a-repository/mapping-geojson-files-on-github#styling-features](https://help.github.com/en/github/managing-files-in-a-repository/mapping-geojson-files-on-github#styling-features)

I want to fill a polygon area but it always gives me a black outline and a black opacity fill. It never respects "color" or any of the "properties" object styling.  
[Edit : I found a technique - below]

I get my polygon area from a USGS water basin API (from an http request node)  
[https://labs.waterdata.usgs.gov/api/nldi/linked-data/nwissite/USGS-01391000/basin](https://labs.waterdata.usgs.gov/api/nldi/linked-data/nwissite/USGS-01391000/basin)  
then a Function node which contains:

```auto
var geo = { "type":"Feature",
            "geometry":msg.payload.features[0].geometry,
            "properties": {
                "style":{ "stroke":"blue",
                          "stroke-width": 5,
                          "fill":"#0000FF",
                          "fill-opacity": 0.4,
                }
            }
};
var m = {name:"water basin",overlay:"water basin", geojson:geo, fit:true};
msg.payload = {command:{map:m,lat:41.02, lon:-74.17}};
return msg;
```

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [28 May 2020 22:05 UTC](https://discourse.nodered.org/t/worldmap-with-geojson/26031/15 "2020-05-28T22:05:29Z")

</div>

version 2.3.13 now on npm should better comply with those rules (that are not formally part of the spec... so no expectations or guarantees...

Their simplestyle example now renders correctly

```auto
[{"id":"46d5de0d.caeeb","type":"worldmap","z":"a3c2a16b.fa113","name":"","lat":"0","lon":"0","zoom":"6","layer":"","cluster":"","maxage":"","usermenu":"show","layers":"show","panit":"false","panlock":"false","zoomlock":"false","hiderightclick":"false","coords":"none","showgrid":"false","path":"/worldmap","x":480,"y":60,"wires":[]},{"id":"1aed2e0.d6106d2","type":"inject","z":"a3c2a16b.fa113","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"str","x":110,"y":60,"wires":[["ec7a10cc.d687e"]]},{"id":"ec7a10cc.d687e","type":"function","z":"a3c2a16b.fa113","name":"","func":"msg.payload = {\n \"type\": \"FeatureCollection\",\n \"features\": [{ \"type\": \"Feature\",\n \"geometry\": {\n \"type\": \"Point\",\n \"coordinates\": [0, 0]\n },\n \"properties\": {\n \"marker-size\": \"medium\",\n \"marker-symbol\": \"bus\",\n \"marker-color\": \"#ace\"\n }\n }, {\n \"type\": \"Feature\",\n \"geometry\": {\n \"type\": \"LineString\",\n \"coordinates\": [[0, 0], [10, 10]]\n },\n \"properties\": {\n \"stroke\": \"#f000f0\",\n \"stroke-width\": 4\n }\n }]\n}\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":280,"y":60,"wires":[["46d5de0d.caeeb"]]}]

```

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [27 June 2020 22:05 UTC](https://discourse.nodered.org/t/worldmap-with-geojson/26031/16 "2020-06-27T22:05:44Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.