Leaflet and Cloudmade: merging two examples together - javascript

I have been experimenting with cloudmade and leaflet and would like to use a snippet of code from cloudmade into my leaflet code. I have both script tags in my header and define the leaflet map by:
var map = L.map('map').setView([lat, -long], 13);
L.tileLayer('http://{s}.tile.cloudmade.com/APIKEY/STYLE/256/{z}/{x}/{y}.png', {
minZoom:6,
maxZoom: 18,
keyboardZoomOffset:2
}).addTo(map);
The snippet i would like to use from Cloudmade is this: http://developers.cloudmade.com/projects/web-maps-api/examples/custom-map-controls
I have tried to re-build this and implement however with the code it contains CM objects/methods. All i need is 3 links on the map so when the user clicks them it takes them to the lat/long stored. If anyone could guide me this would be great.
I am not a Javascript map pro- but assuming this is not a big issue and is my misunderstanding between the two plugins.
Note: I have took out my API and style ID in this example.
Note: I have also asked on leaflet/cloudmade forums and no replys but many views!
Thank You

Leaflet creator here. Check out the code example on Leaflet API reference page: http://leafletjs.com/reference.html#icontrol
Hope this helps.

Related

Open generated Map with markers in Google Maps

I generate a Google Map like the following:
lat_lng = new google.maps.LatLng(51.165691, 10.451526);
mapOptions = {
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: lat_lng,
}
map = new google.maps.Map(document.getElementById('map'), mapOptions);
also i got multiple markers that are dynamically added to the map. So as far as i know there is no way in my case to do it without the javascript API.
My Question is:
Is there any way to open that generated map (with all options and markers) in google maps? (https://www.google.com/maps/ ...)
... unfortunately it is not enough to just use the fullscreen functionality of maps!
Thanks in advance :)
The correct answer is yes and no.
There is no way to do such thing on the official Google Maps site, however you can create a map in Google's My Maps. The url does start with 'https://www.google.com/maps'. You can easily add your markers via the UI and I believe it also supports some file formats to import a batch of markers easily. I think you can also set some of the options you want.
Here's an example of an existing map created with this technique.
The only other option I know is to use the Google Maps API to create your custom map with all your markers and options, as suggested by other users.
#JonathanChaplin was correct in his suggestion #FalcoB... if I understand you correctly...
Your aim is for a google map to display, and when it does it shows all map markers like this:
To achieve this you need to store information (such as lat and lng values) externally, like for example in a json file. I have done this previously and my bit of code was simply:
//loads the data from json file resulting in markers being displayed
map.data.loadGeoJson('../upload/file.json');
Google has published documentation on this which can be viewed here:
https://developers.google.com/maps/documentation/javascript/importing_data
I think you can't put the map in google maps, but you can display full screen in your webpage.

Add animation to an interactive map (javascript)

Hello i got a problem for add animation to an interactive map.
I add a map in wordpress with the plugin responsive vector map... at the moment it works, but i need to add animation to the interactive map, in special, regions of the map that appear separated and then come together forming the map.
I've been searching, but I haven't found any solution.
Thank you for your attention and regards
You can use Google Maps API and code it by hand if you are good at coding :)

How to show map marker in Google Maps API using JavaScript

How to show map marker in Google Maps API using JavaScript?
How to search specific area with display around location? How to show with dotted lines?
I'm not gonna do the whole job for you, but please have a look at gmap3. A jQuery plugin that lets you handle Google Maps in a very easy way.
Include the source file and then just to get started, create a div:
<div id="map"></div>
Then, in jQuery, run:
$("#map").gmap3();
This should generate a Google Map with no specific coordinates. If you want to get more complex, you can read all about that at http://gmap3.net/en/catalog/, but here's an example.
$('#map').gmap3({
marker:{
latLng:[29.132318972825445,81.32052349999992]
}
});
This puts out a pin at a certain coordinate. They have a clear documentation, so just head over there and follow their instructions. Hope this helps!

Using a slider controller to update map data/shading? Example included

How can I create a similar map without using Flash?
map example here
I have a map of the U.S. with each state colored based on annual data (heat map). For instance, obesity rates from 2000 to 2010 (each year would have different values for each state). I would like the user to scrub with the slider to update the map for each year similar to the example above.
I'm very new to Javascript so I'm wondering if there's a library that could help. I'm aware of raphael.js but haven't seen any examples of this particular behavior. Thanks for any pointers.
Yes you can use the OpenLayers API to create similar heat map without using Flash. OpenLayers API is based on javascript and pretty simple to use. First, you need to look into the basics:
http://openlayers.org/
OpenLayers HeatMap Examples:
http://maps.seai.ie/wind/
http://dev.openlayers.org/sandbox/camptocamp/canvas/openlayers/examples/heatMap.html
http://sloweb.org.uk/ollie/heatmap/

How to add address to a google map on web page?

I am creating a web app. One of the page is designed to show google map of an address traced from database. So after I get langitude and latitude using gencode, I know how to draw the google map, but how do I show an address tag on that map? Any help is appreciated.
You are probably talking about a Marker concept.
Take a look at this article
A couple of other SO folks asked similar questions. These might be helpful:
Draggable markers
While this may be OT, if you ever decide to remove a marker, also look at this question
There is also detailed Marker docs available at the usual API docs site

Categories