Grouping by Continents in Leaflet.js geoJSON - javascript

I have a geoJson data layer of the world from naturalearthdata.com and a working map based on countries (features) with hover colors setup. I want to group the data on continents, so I'd end up with Europe, Americas, Aftrica and Middle East, Asia & Australia.
There doesn't seem to be any examples of this - I wouldn't think I need to change the data since all countries have the continent property. Whats best practice to achieve this?

Just to update, I decided to alter the .shp file in QGIS and merge the individual features to make these larger regions. Took a load of tidying up stray lines with the Node tool but this produced what I needed.

Related

Any suggestions on how to remove multiple features from geojson file quickly?

I have a geojson file I would like to simplify. It currently contains about 33,000 records. The file is of all the roads in the state of Nevada and I would like to be able to remove the roads in cities(i.e. Las Vegas) because it is taking up a chunk of data, when those roads are easy to see from a leaflet map so they don't need to be drawn.
I have tried to use geojson.io and other geojson generators to try and remove the roads but it will take way too much time to manually delete all these roads individually. I was hoping there would be a something similar that I could draw a rectangle over the area I want to delete and it would remove all of those features.
EDIT
I have tried to simplify the layer with http://mapshaper.org/ but the file is still to large. If I try to simplify it more, the resulting roads would not be very accurate.
There are many ways that you can do this, but since you have already used mapshaper to simplify, we can use mapshaper to clip or erase features.
Using geojson.io I created a quick bounding box geojson called clip.json - with this I can remove features outside or inside of this feature from the roads geojson file. While I created a geojson to use to clip/erase features, you could use a pre-existing file the same way.
Drag both geojson files into mapshaper.org. Toggle the view of the road geojson (as only one layer is shown at at time, the current layer is displayed on the top ribbon and can be changed by clicking on the name.)
Once viewing the roads geojson, open the page's console window (top right of the page) and type:
erase clip.json
This will give you something like (using Nevada and a basic bbox for Las Vegas):
Now you can easily export the file and use it as needed.
To achieve the opposite effect, you would use clip: clip clip.json

Interactive map of Canada with latitude and longitude markers

Is there the easy way to have interactive map of Canada (based on provinces first), to basically be able to click on province, then to zoom in selected province, and show markers on that region based on latitude and longitude?
Initially I though I can use google maps API for that, but it would be too much extra codding to draw province boundaries and to add all the events, etc. so I'm looking for some alternative which might save me some time so I don't have to worry about UI part that much. Any suggestion?
I could recommend leaflet: Leaflet
Here is an example of an interactive map: Interactive Map Example
I sometimes get boundary datas from (but there are for sure a dozent others) : Boundary Provider
You can get a json from the boundary provider an use leaflet javascript library to fullfill your project. Leaflet is really easy to get into and many code-snippets can be found on the internet to have a quick nice looking output.
Check out Leaflet.
Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Weighing just about 38 KB of JS, it has all the mapping features most developers ever need.
I have personally used Leaflet in many R projects and it's the best JavaScript library for interactive maps manipulation out there.

Population density and Circles (to represent earthquakes) on the same Map

I need to create a Map to compare the population density of a country (e.g. USA at county -or state- level) and the epicenter of some earthquakes to see how many people could have felt those quakes.
The problem is that I can't find a way to put these 2 things on the same map.
In a db I have some earthquakes taken from USGS and the population data taken from Census.gov.
I was able to map earthquakes (coordinates lat/lng) with circles thanks to the Google Maps API but without population density.
I also created a map with Highcharts (Highmaps) to display population density, but I can't put circles on that because lat/lng points are not supported.
I also read about vectorWorkz and jVectorMap but couldn't find examples.
Is there a way to do such thing? I'm not an expert so if someone has a solution or could provide me a little example I would be eternally grateful. Thank you!
jVectorMap suits all your needs. Here is an example of regions density and markers visualisation on the same map.

leaflet js strange map behavior

I am having some strange behavior with my leafletjs map. I've tried plotting a few polylines between north america and asia, but get the polyline split into two pieces.
Is there a way to fix this?
You did not add any code with your request so it is no easy to respond you correctly
Likely you need to split each polyline in two parts, else they directly jump to the other part of the world passing over the europe. Then try to center the map on the pacific ocean and not in the europe in order to get a better map.

Country shapes for google maps

I'm doing few experiments using Google Maps and now I was taking a look to the circles.
My idea is to create a circle for each country in Europe and load the markers inside only when someone click on the circle.
I did it and works fine.
Now what I'd like to do is to create a shape of the countries and replace each circle.
I was looking at the polygons and it seems to be what I'm looking for but creating a good shape for each country takes a planty of time...
There is a Google Maps service that highlight the countries that you need? (Not Google Charts, I already took a look on it)
Or Exist something already builded to import easily with Javascript?
The boundaries of the world countries are available in the Natural Earth data set and in a public FusionTable.
Here is an example using that data to display French provinces

Categories