Interactive map of Canada with latitude and longitude markers - javascript

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.

Related

Using Google Maps API with custom tiles

So, basic gist is, I have my own tiles of not the real world I'd like to display with the Google Maps viewer. I've found examples of how to split an existing single image into tiles for use with it, but nothing that deals with setting up your own tiler.
I have map data such as this:
https://dl.dropboxusercontent.com/u/44766482/superimage/index.html
Which right now is just a bunch of 1600x1600 images in an html table. This naive method works, but I'd like to switch to the more robust google api for better zooming and smarter streaming of the image data.
I've been unable to find a good example of how to generate your own tiles for the zoom levels and bring it together with some html/js.
If you want some more information for the goal process;
I have a python script that can output any size tiles of the map, at any zoom level. I'd like to bundle those together into a google maps api website. But in my own efforts I have not found a good example or documentation of how to do that. For one, I can only find examples of how the zoom levels work for the real world map, but not for a custom one.
Edit:
Got most things working as I want them, but I'm still confused regarding the "center" that can be set, as it's in lat and lng, which don't apply. I'd also like to set boundaries as currently it tries to load .png files outside of the maps range.
My current progress:
https://dl.dropboxusercontent.com/u/44766482/googlemapspreview/index.html
I think what you are looking for is the google maps imageMapTypes:
https://developers.google.com/maps/documentation/javascript/maptypes#ImageMapTypes
Basically, each zoom level is the 4 lower zoom tiles combined. A Projection function can be skipped to get orthogonal mapping.

Javascript plugin to draw markers, lines, and shapes on a latitude/longitude grid for offline use?

I am attempting to make a simple PhoneGap app that will allow a user to input lat/long points and bearings and calculate their estimated intersection, along with a measure of error. I would like to display the lines, intersection, and an error elipsoid on a map or at least a grid of latitude and longitude lines, so the user can visualize the accuracy of the point. The tricky part is that this will be used for wildlife tracking in areas where the user may not have cell service. Is there some sort of Javascript plugin that will make a lat/long grid available for me to draw georeferenced lines and shapes on? I would love to use something like the Google Maps API, but that clearly won't work for offline use. I've Googled quite a bit, but I'm not sure where to start with this or if it's even feasible at all.
This program is similar to what I'm trying to achieve: http://www.locateiii.com/
Any ideas are greatly appreciated.
I'd use d3.js and http://code.google.com/p/gmapcatcher/ something like this where you can keep the google maps offline. If that's not feasible you can always us D3 with a svg of the map.
I ended up using OpenLayers with OpenStreetMap tiles prepared by Maperitive. Simple and works well with PhoneGap.

Displaying Historical Maps

I have an application where I need to show historical maps. Is there a way to use the Google API for that, ie show a map of Europe for the year 1800, 1900 etc, with different borders and country names?
I am not particular to any language and also welcome solutions that might not involve the Google API but another library or service
I am not aware about such functionality in Google Maps right now. However, it should be noted that Google Earth has several historical maps (including a world map from 1790, a 1833 US map, a 1680 map of Tokyo, and a 1716 map of Paris), so chances are they will add this functionality to Google Maps at some point in the future.
Google doesnt have historic ability built in but it does have code to allow you to tile, zoom and display your own images.
Also take note that for commercial application I beleive you might need to license it.
Google maps support having different tiles (the map picture) under them. So if you can get a map of 1800 then you can show it in the map (but probably you would need a high resolution map).
And so on.

Google Maps Best Practices?

We started using Google Maps on our web application rather extensively. It worked fine at the beginning, but as we add more markers we find that the performance are not quite there. Although I'm quite sure we don't use it in the most efficient way.
I am looking for information about Google Maps best practices and tips'n tricks. Any suggestions?
You might find some good ideas in this article, which compares several methods of handling large amounts of markers.
Marker Manager has some limitations, depending on what you're trying to accomplish; for instance, it doesn't allow every marker to be available from every zoom level. I created a clustering function based on the principles discussed in this tutorial. It uses the Static Maps API in PHP, but the principles behind the clustering can be used however you want.
Update: This clustering utility was just released: MarkerClusterer
Use Marker Manager.
Limit markers to what's visible (ie, understand the window boundaries, and only show markers that fall inside the window)
Learn to listen for various map activities and react - such as viewpoint moves, zooming, etc - to update the markers
Don't show markers that overlap significantly - show only one marker (perhaps a different shade or color to denote there are several points at this marker) and let the user zoom in if they want to see the individual markers. Use the tooltip to show a zoomed in window if you want to get fancy.

How to show Google Maps tile overlays of Google Earth's Old-world maps (or a blank / physical world map)?

I am trying to build a Google Maps-driven web application that can display a map of the whole world in one or all of the following configurations:
A continent-outline map, only differentiating between land and water (like this, but without the country borders/names, and without showing any additional detail as you zoom in)
A physical geography map of the world, containing absolutely no road, city, or political borders (so the default satellite map is out - if I can't get anything else working, I'm considering just restricting the zoom-level such that you can't get in close enough to see modern features)
The same kind of old-world maps shown here and here for Google Earth.
A similar effect to what I'm after can be achieved with the old maps from the Rumsey Collection (q.v.), which are excellent but rather bandwidth-intensive and slow down the GMaps performance significantly. Simpler, less detailed images would better suit my purposes.
Is there an efficient way to load those world-spanning KMZ graphical files from bullet 3 as tilesets?
How about the physical or silhouette-based map? If necessary, one could follow the GMaps guideline for carving out .png files to represent each tile if there exists a freely available starting map.
You can also use open-source MapTiler application - http://www.maptiler.org/ or the command line utility gdal2tiles.
Here is a tutorial on building custom tiled maps:
http://webtide.wordpress.com/2008/08/27/custom-google-maps/
This appears to be a service for creating custom tiled maps:
http://www.maplib.net/
Good luck!

Categories