Draw country border on leaflet map using JSON coordinatesHow to map JSON data graphically on a Leaflet map?leaflet map shows up greyShips movement on a leaflet mapAdd border layer to offline map using leafletleaflet and xy coordinatesDrawing rectangle on leaflet by giving coordinateLeaflet - get data from static file and API call to build a choropleth mapDestination coordinates in leaflet routingDraw a map of a specific country with leafletDraw a map of a specific country with leaflet in djangoHow to programmatically draw on an OSM map with leaflet
How can I support myself financially as a 17 year old with a loan?
Missing Piece of Pie - Can you find it?
Will 700 more planes a day fly because of the Heathrow expansion?
Why do money exchangers give different rates to different bills?
How can I get a job without pushing my family's income into a higher tax bracket?
How does this change to the opportunity attack rule impact combat?
Pressure inside an infinite ocean?
Pronunciation of numbers with respect to years
Why isn't nylon as strong as kevlar?
How I can I roll a number of non-digital dice to get a random number between 1 and 150?
Shantae Dance Matching
What is a smasher?
How do I overfit?
Has a commercial or military jet bi-plane ever been manufactured?
Should I replace my bicycle tires if they have not been inflated in multiple years
Would Hubble Space Telescope improve black hole image observed by EHT if it joined array of telesopes?
Finding positions of minimum values in list
Why was the battle set up *outside* Winterfell?
How did Shepard's and Grissom's speeds compare with orbital velocity?
Point of the the Dothraki's attack in GoT S8E3?
Prove that the limit exists or does not exist
Is there an idiom that support the idea that "inflation is bad"?
Should I mention being denied entry to UK due to a confusion in my Visa and Ticket bookings?
Using a microphone from the 1930s
Draw country border on leaflet map using JSON coordinates
How to map JSON data graphically on a Leaflet map?leaflet map shows up greyShips movement on a leaflet mapAdd border layer to offline map using leafletleaflet and xy coordinatesDrawing rectangle on leaflet by giving coordinateLeaflet - get data from static file and API call to build a choropleth mapDestination coordinates in leaflet routingDraw a map of a specific country with leafletDraw a map of a specific country with leaflet in djangoHow to programmatically draw on an OSM map with leaflet
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
I have a leaflet map, and I have a set of country borders in a long JSON file. I am trying to use the JSON coordinates to draw a solid green border along the border of a country displayed in the map object.
I do not want to draw a fully covered layer over the country either.
I have built a JS function that makes an Ajax call to request JSON border coordinates for a specific country.
When the JSON data is received, I apply and bound it to the map object.
function applyCountryBorder(countryname)
var addresssObj = null;
jQuery.ajax(
type: 'GET',
dataType: 'json',
url: 'https://nominatim.openstreetmap.org/search?country=' + countryname.trim() + '&polygon_geojson=1&format=json',
async: true,
cache: true,
success: function(responseData)
var polyline = L.polyline(responseData[0].geojson.coordinates,
color: 'green',
weight: 14,
opacity: 1
).addTo(map);
map.invalidateSize();
,
error: function(responseData)
addresssObj = responseData;
);
I expect the border of the specified country to have a bright, solid, thick, green line. But actually, the map and country borders remain unchanged and remain default.
What am I doing wrong? How can I achieve the desired goal?
javascript json leaflet polygon openstreetmap
asked Mar 22 at 22:33
Morgan Janjua CraneMorgan Janjua Crane
84
add a comment |
I have a leaflet map, and I have a set of country borders in a long JSON file. I am trying to use the JSON coordinates to draw a solid green border along the border of a country displayed in the map object.
I do not want to draw a fully covered layer over the country either.
I have built a JS function that makes an Ajax call to request JSON border coordinates for a specific country.
When the JSON data is received, I apply and bound it to the map object.
function applyCountryBorder(countryname)
var addresssObj = null;
jQuery.ajax(
type: 'GET',
dataType: 'json',
url: 'https://nominatim.openstreetmap.org/search?country=' + countryname.trim() + '&polygon_geojson=1&format=json',
async: true,
cache: true,
success: function(responseData)
var polyline = L.polyline(responseData[0].geojson.coordinates,
color: 'green',
weight: 14,
opacity: 1
).addTo(map);
map.invalidateSize();
,
error: function(responseData)
addresssObj = responseData;
);
I expect the border of the specified country to have a bright, solid, thick, green line. But actually, the map and country borders remain unchanged and remain default.
What am I doing wrong? How can I achieve the desired goal?
javascript json leaflet polygon openstreetmap
asked Mar 22 at 22:33
Morgan Janjua CraneMorgan Janjua Crane
84
Maybe this answer can help out
– N8888
Mar 22 at 22:37
add a comment |
I have a leaflet map, and I have a set of country borders in a long JSON file. I am trying to use the JSON coordinates to draw a solid green border along the border of a country displayed in the map object.
I do not want to draw a fully covered layer over the country either.
I have built a JS function that makes an Ajax call to request JSON border coordinates for a specific country.
When the JSON data is received, I apply and bound it to the map object.
function applyCountryBorder(countryname)
var addresssObj = null;
jQuery.ajax(
type: 'GET',
dataType: 'json',
url: 'https://nominatim.openstreetmap.org/search?country=' + countryname.trim() + '&polygon_geojson=1&format=json',
async: true,
cache: true,
success: function(responseData)
var polyline = L.polyline(responseData[0].geojson.coordinates,
color: 'green',
weight: 14,
opacity: 1
).addTo(map);
map.invalidateSize();
,
error: function(responseData)
addresssObj = responseData;
);
I expect the border of the specified country to have a bright, solid, thick, green line. But actually, the map and country borders remain unchanged and remain default.
What am I doing wrong? How can I achieve the desired goal?
javascript json leaflet polygon openstreetmap
asked Mar 22 at 22:33
Morgan Janjua CraneMorgan Janjua Crane
84
I have a leaflet map, and I have a set of country borders in a long JSON file. I am trying to use the JSON coordinates to draw a solid green border along the border of a country displayed in the map object.
I do not want to draw a fully covered layer over the country either.
I have built a JS function that makes an Ajax call to request JSON border coordinates for a specific country.
When the JSON data is received, I apply and bound it to the map object.
function applyCountryBorder(countryname)
var addresssObj = null;
jQuery.ajax(
type: 'GET',
dataType: 'json',
url: 'https://nominatim.openstreetmap.org/search?country=' + countryname.trim() + '&polygon_geojson=1&format=json',
async: true,
cache: true,
success: function(responseData)
var polyline = L.polyline(responseData[0].geojson.coordinates,
color: 'green',
weight: 14,
opacity: 1
).addTo(map);
map.invalidateSize();
,
error: function(responseData)
addresssObj = responseData;
);
I expect the border of the specified country to have a bright, solid, thick, green line. But actually, the map and country borders remain unchanged and remain default.
What am I doing wrong? How can I achieve the desired goal?
javascript json leaflet polygon openstreetmap
javascript json leaflet polygon openstreetmap
asked Mar 22 at 22:33
Morgan Janjua CraneMorgan Janjua Crane
84
asked Mar 22 at 22:33
Morgan Janjua CraneMorgan Janjua Crane
84
edited Mar 25 at 4:04
Morgan Janjua Crane
asked Mar 22 at 22:33
Morgan Janjua CraneMorgan Janjua Crane
84
asked Mar 22 at 22:33
Morgan Janjua CraneMorgan Janjua Crane
84
asked Mar 22 at 22:33
Morgan Janjua CraneMorgan Janjua Crane
84
84
Maybe this answer can help out
– N8888
Mar 22 at 22:37
add a comment |
Maybe this answer can help out
– N8888
Mar 22 at 22:37
Maybe this answer can help out
– N8888
Mar 22 at 22:37
Maybe this answer can help out
– N8888
Mar 22 at 22:37
add a comment |
1 Answer
1
active
oldest
votes
Most likely border (MultiPolygon shape) is getting rendered but just not on the place you expect it to. In GeoJSON format coordinates are represented in lng,lat order while L.polyline expects the coordinates in format lat,lng, in another words GeoJSON coordinates (lng,lat) needs to swapped to lat,lng.
L.GeoJSON.coordsToLatLng() function could be utilized for that matter, for example
const latLngs = L.GeoJSON.coordsToLatLngs(data[0].geojson.coordinates,2);
L.polyline(latLngs,
color: "green",
weight: 14,
opacity: 1
).addTo(map);
Since a provided service returns GeoJSON, another option would be to utilize L.geoJSON to render a border like this:
const layer = L.tileLayer("http://s.tile.openstreetmap.org/z/x/y.png",
maxZoom: 19,
attribution:
'© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
);
const map = L.map("map",
layers: [layer]
).setView([52.8203934, -4.5700609], 6);
applyCountryBorder(map, "United Kingdom");
function applyCountryBorder(map, countryname)
jQuery
.ajax(
type: "GET",
dataType: "json",
url:
"https://nominatim.openstreetmap.org/search?country=" +
countryname.trim() +
"&polygon_geojson=1&format=json"
)
.then(function(data)
/*const latLngs = L.GeoJSON.coordsToLatLngs(data[0].geojson.coordinates,2)
L.polyline(latLngs,
color: "green",
weight: 14,
opacity: 1
).addTo(map);*/
L.geoJSON(data[0].geojson,
color: "green",
weight: 14,
opacity: 1,
fillOpacity: 0.0
).addTo(map);
);
#map
width: 100%;
height: 480px;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link
rel="stylesheet"
href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
/>
<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
<div id="map"></div>answered Mar 26 at 21:32
Vadim GremyachevVadim Gremyachev
38.3k774116
1
Brilliant. Thank you, just what i was missing.
– Morgan Janjua Crane
Mar 28 at 0:30
How do I get just the border and no color fill inside? Apparently this draws the border as well as fills layer with a color too. Is it possible to have transparent fill , but solid border only?
– Morgan Janjua Crane
Mar 28 at 0:39
@MorganJanjuaCrane, i guess you are afterfillOpacity: 0.0property, the example has been updated
– Vadim Gremyachev
Mar 28 at 8:47
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55308638%2fdraw-country-border-on-leaflet-map-using-json-coordinates%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Most likely border (MultiPolygon shape) is getting rendered but just not on the place you expect it to. In GeoJSON format coordinates are represented in lng,lat order while L.polyline expects the coordinates in format lat,lng, in another words GeoJSON coordinates (lng,lat) needs to swapped to lat,lng.
L.GeoJSON.coordsToLatLng() function could be utilized for that matter, for example
const latLngs = L.GeoJSON.coordsToLatLngs(data[0].geojson.coordinates,2);
L.polyline(latLngs,
color: "green",
weight: 14,
opacity: 1
).addTo(map);
Since a provided service returns GeoJSON, another option would be to utilize L.geoJSON to render a border like this:
const layer = L.tileLayer("http://s.tile.openstreetmap.org/z/x/y.png",
maxZoom: 19,
attribution:
'© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
);
const map = L.map("map",
layers: [layer]
).setView([52.8203934, -4.5700609], 6);
applyCountryBorder(map, "United Kingdom");
function applyCountryBorder(map, countryname)
jQuery
.ajax(
type: "GET",
dataType: "json",
url:
"https://nominatim.openstreetmap.org/search?country=" +
countryname.trim() +
"&polygon_geojson=1&format=json"
)
.then(function(data)
/*const latLngs = L.GeoJSON.coordsToLatLngs(data[0].geojson.coordinates,2)
L.polyline(latLngs,
color: "green",
weight: 14,
opacity: 1
).addTo(map);*/
L.geoJSON(data[0].geojson,
color: "green",
weight: 14,
opacity: 1,
fillOpacity: 0.0
).addTo(map);
);
#map
width: 100%;
height: 480px;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link
rel="stylesheet"
href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
/>
<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
<div id="map"></div>answered Mar 26 at 21:32
Vadim GremyachevVadim Gremyachev
38.3k774116
1
Brilliant. Thank you, just what i was missing.
– Morgan Janjua Crane
Mar 28 at 0:30
How do I get just the border and no color fill inside? Apparently this draws the border as well as fills layer with a color too. Is it possible to have transparent fill , but solid border only?
– Morgan Janjua Crane
Mar 28 at 0:39
@MorganJanjuaCrane, i guess you are afterfillOpacity: 0.0property, the example has been updated
– Vadim Gremyachev
Mar 28 at 8:47
add a comment |
Most likely border (MultiPolygon shape) is getting rendered but just not on the place you expect it to. In GeoJSON format coordinates are represented in lng,lat order while L.polyline expects the coordinates in format lat,lng, in another words GeoJSON coordinates (lng,lat) needs to swapped to lat,lng.
L.GeoJSON.coordsToLatLng() function could be utilized for that matter, for example
const latLngs = L.GeoJSON.coordsToLatLngs(data[0].geojson.coordinates,2);
L.polyline(latLngs,
color: "green",
weight: 14,
opacity: 1
).addTo(map);
Since a provided service returns GeoJSON, another option would be to utilize L.geoJSON to render a border like this:
const layer = L.tileLayer("http://s.tile.openstreetmap.org/z/x/y.png",
maxZoom: 19,
attribution:
'© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
);
const map = L.map("map",
layers: [layer]
).setView([52.8203934, -4.5700609], 6);
applyCountryBorder(map, "United Kingdom");
function applyCountryBorder(map, countryname)
jQuery
.ajax(
type: "GET",
dataType: "json",
url:
"https://nominatim.openstreetmap.org/search?country=" +
countryname.trim() +
"&polygon_geojson=1&format=json"
)
.then(function(data)
/*const latLngs = L.GeoJSON.coordsToLatLngs(data[0].geojson.coordinates,2)
L.polyline(latLngs,
color: "green",
weight: 14,
opacity: 1
).addTo(map);*/
L.geoJSON(data[0].geojson,
color: "green",
weight: 14,
opacity: 1,
fillOpacity: 0.0
).addTo(map);
);
#map
width: 100%;
height: 480px;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link
rel="stylesheet"
href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
/>
<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
<div id="map"></div>answered Mar 26 at 21:32
Vadim GremyachevVadim Gremyachev
38.3k774116
1
Brilliant. Thank you, just what i was missing.
– Morgan Janjua Crane
Mar 28 at 0:30
How do I get just the border and no color fill inside? Apparently this draws the border as well as fills layer with a color too. Is it possible to have transparent fill , but solid border only?
– Morgan Janjua Crane
Mar 28 at 0:39
@MorganJanjuaCrane, i guess you are afterfillOpacity: 0.0property, the example has been updated
– Vadim Gremyachev
Mar 28 at 8:47
add a comment |
Most likely border (MultiPolygon shape) is getting rendered but just not on the place you expect it to. In GeoJSON format coordinates are represented in lng,lat order while L.polyline expects the coordinates in format lat,lng, in another words GeoJSON coordinates (lng,lat) needs to swapped to lat,lng.
L.GeoJSON.coordsToLatLng() function could be utilized for that matter, for example
const latLngs = L.GeoJSON.coordsToLatLngs(data[0].geojson.coordinates,2);
L.polyline(latLngs,
color: "green",
weight: 14,
opacity: 1
).addTo(map);
Since a provided service returns GeoJSON, another option would be to utilize L.geoJSON to render a border like this:
const layer = L.tileLayer("http://s.tile.openstreetmap.org/z/x/y.png",
maxZoom: 19,
attribution:
'© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
);
const map = L.map("map",
layers: [layer]
).setView([52.8203934, -4.5700609], 6);
applyCountryBorder(map, "United Kingdom");
function applyCountryBorder(map, countryname)
jQuery
.ajax(
type: "GET",
dataType: "json",
url:
"https://nominatim.openstreetmap.org/search?country=" +
countryname.trim() +
"&polygon_geojson=1&format=json"
)
.then(function(data)
/*const latLngs = L.GeoJSON.coordsToLatLngs(data[0].geojson.coordinates,2)
L.polyline(latLngs,
color: "green",
weight: 14,
opacity: 1
).addTo(map);*/
L.geoJSON(data[0].geojson,
color: "green",
weight: 14,
opacity: 1,
fillOpacity: 0.0
).addTo(map);
);
#map
width: 100%;
height: 480px;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link
rel="stylesheet"
href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
/>
<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
<div id="map"></div>answered Mar 26 at 21:32
Vadim GremyachevVadim Gremyachev
38.3k774116
Most likely border (MultiPolygon shape) is getting rendered but just not on the place you expect it to. In GeoJSON format coordinates are represented in lng,lat order while L.polyline expects the coordinates in format lat,lng, in another words GeoJSON coordinates (lng,lat) needs to swapped to lat,lng.
L.GeoJSON.coordsToLatLng() function could be utilized for that matter, for example
const latLngs = L.GeoJSON.coordsToLatLngs(data[0].geojson.coordinates,2);
L.polyline(latLngs,
color: "green",
weight: 14,
opacity: 1
).addTo(map);
Since a provided service returns GeoJSON, another option would be to utilize L.geoJSON to render a border like this:
const layer = L.tileLayer("http://s.tile.openstreetmap.org/z/x/y.png",
maxZoom: 19,
attribution:
'© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
);
const map = L.map("map",
layers: [layer]
).setView([52.8203934, -4.5700609], 6);
applyCountryBorder(map, "United Kingdom");
function applyCountryBorder(map, countryname)
jQuery
.ajax(
type: "GET",
dataType: "json",
url:
"https://nominatim.openstreetmap.org/search?country=" +
countryname.trim() +
"&polygon_geojson=1&format=json"
)
.then(function(data)
/*const latLngs = L.GeoJSON.coordsToLatLngs(data[0].geojson.coordinates,2)
L.polyline(latLngs,
color: "green",
weight: 14,
opacity: 1
).addTo(map);*/
L.geoJSON(data[0].geojson,
color: "green",
weight: 14,
opacity: 1,
fillOpacity: 0.0
).addTo(map);
);
#map
width: 100%;
height: 480px;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link
rel="stylesheet"
href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
/>
<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
<div id="map"></div>const layer = L.tileLayer("http://s.tile.openstreetmap.org/z/x/y.png",
maxZoom: 19,
attribution:
'© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
);
const map = L.map("map",
layers: [layer]
).setView([52.8203934, -4.5700609], 6);
applyCountryBorder(map, "United Kingdom");
function applyCountryBorder(map, countryname)
jQuery
.ajax(
type: "GET",
dataType: "json",
url:
"https://nominatim.openstreetmap.org/search?country=" +
countryname.trim() +
"&polygon_geojson=1&format=json"
)
.then(function(data)
/*const latLngs = L.GeoJSON.coordsToLatLngs(data[0].geojson.coordinates,2)
L.polyline(latLngs,
color: "green",
weight: 14,
opacity: 1
).addTo(map);*/
L.geoJSON(data[0].geojson,
color: "green",
weight: 14,
opacity: 1,
fillOpacity: 0.0
).addTo(map);
);
#map
width: 100%;
height: 480px;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link
rel="stylesheet"
href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
/>
<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
<div id="map"></div>const layer = L.tileLayer("http://s.tile.openstreetmap.org/z/x/y.png",
maxZoom: 19,
attribution:
'© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
);
const map = L.map("map",
layers: [layer]
).setView([52.8203934, -4.5700609], 6);
applyCountryBorder(map, "United Kingdom");
function applyCountryBorder(map, countryname)
jQuery
.ajax(
type: "GET",
dataType: "json",
url:
"https://nominatim.openstreetmap.org/search?country=" +
countryname.trim() +
"&polygon_geojson=1&format=json"
)
.then(function(data)
/*const latLngs = L.GeoJSON.coordsToLatLngs(data[0].geojson.coordinates,2)
L.polyline(latLngs,
color: "green",
weight: 14,
opacity: 1
).addTo(map);*/
L.geoJSON(data[0].geojson,
color: "green",
weight: 14,
opacity: 1,
fillOpacity: 0.0
).addTo(map);
);
#map
width: 100%;
height: 480px;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link
rel="stylesheet"
href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
/>
<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
<div id="map"></div>answered Mar 26 at 21:32
Vadim GremyachevVadim Gremyachev
38.3k774116
edited Mar 28 at 8:46
answered Mar 26 at 21:32
Vadim GremyachevVadim Gremyachev
38.3k774116
answered Mar 26 at 21:32
Vadim GremyachevVadim Gremyachev
38.3k774116
answered Mar 26 at 21:32
Vadim GremyachevVadim Gremyachev
38.3k774116
38.3k774116
1
Brilliant. Thank you, just what i was missing.
– Morgan Janjua Crane
Mar 28 at 0:30
How do I get just the border and no color fill inside? Apparently this draws the border as well as fills layer with a color too. Is it possible to have transparent fill , but solid border only?
– Morgan Janjua Crane
Mar 28 at 0:39
@MorganJanjuaCrane, i guess you are afterfillOpacity: 0.0property, the example has been updated
– Vadim Gremyachev
Mar 28 at 8:47
add a comment |
1
Brilliant. Thank you, just what i was missing.
– Morgan Janjua Crane
Mar 28 at 0:30
How do I get just the border and no color fill inside? Apparently this draws the border as well as fills layer with a color too. Is it possible to have transparent fill , but solid border only?
– Morgan Janjua Crane
Mar 28 at 0:39
@MorganJanjuaCrane, i guess you are afterfillOpacity: 0.0property, the example has been updated
– Vadim Gremyachev
Mar 28 at 8:47
1
1
Brilliant. Thank you, just what i was missing.
– Morgan Janjua Crane
Mar 28 at 0:30
Brilliant. Thank you, just what i was missing.
– Morgan Janjua Crane
Mar 28 at 0:30
How do I get just the border and no color fill inside? Apparently this draws the border as well as fills layer with a color too. Is it possible to have transparent fill , but solid border only?
– Morgan Janjua Crane
Mar 28 at 0:39
How do I get just the border and no color fill inside? Apparently this draws the border as well as fills layer with a color too. Is it possible to have transparent fill , but solid border only?
– Morgan Janjua Crane
Mar 28 at 0:39
@MorganJanjuaCrane, i guess you are after
fillOpacity: 0.0 property, the example has been updated– Vadim Gremyachev
Mar 28 at 8:47
@MorganJanjuaCrane, i guess you are after
fillOpacity: 0.0 property, the example has been updated– Vadim Gremyachev
Mar 28 at 8:47
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55308638%2fdraw-country-border-on-leaflet-map-using-json-coordinates%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Maybe this answer can help out
– N8888
Mar 22 at 22:37