Custom Google Map - javascript

I can see mention, but no example of being able to use an image to create a Google Map (Or at least use their API). From what I can work out you can use the ImageMapType class in the API to create a map, instead of earth (or and area), an image like JPEG. Is this correct or am I barking up the wrong tree?

You might want to check out Leaflet JS for this. I've used it for custom tiles and it works well.

I found the tutorial I followed years ago. This should at least be a starting point... http://www.dicabrio.com/javascript/custom-world-google-maps.php

Related

How to add location-pin to Cartagen map?

I don't see much mention of Cartagen on stackoverflow, so please point me somewhere else if there is a better forum for this question. I am using Cartagen JavaScript library to render a map in the browser. I want to place a location pin on the map. I figure there must be an easy way to do this but I haven't been able to find it in the documentation or code.
I found a way to place a map-pin. I used User.set_loc() to set the location of the default User. Then I used User.mark() to mark that location. I changed the code in User.mark() from drawing a circle for the mark, to using ctx.drawImage() to put my .png of a map-pin on to the map. I might be able to make other pins if I make other instances of User.
This use of User.mark() did not create an object that will be automatically be used on every redraw of the map. For that I think I might have to use something like the User.add_node() and User.toggle_way_drawing() whereby a node is created, tagged with "user_submited", and put on the Geohash.objects array. The Geohash.objects array is used by Gartagen.draw() to add user-submitted objects to the Cartagen.feature_queue which are then rendered on the map.
But I haven't totally figured out the use of User.add_node() yet, so instead I added code to Cartagen.draw() to call User.set_loc() and User.mark() every time the map map is redrawn.

Use mapbox for rendering inside pixi-js or any other webgl/canvas framework?

I love the styling options provided by mapbox and need to know if there is any way I can use their map api for a game I am writing.
I dont think I can make any use of a fully finished solution that just loads the map into a container element (mapbox-gl-js) but rather would need image data etc. to use myself in a different engine.
Is this even possible with mapbox? How would I do it?
Turns out I was looking in the wrong place. Mapbox has its "static" api which allows to fetch the tiles as images directly without rendering it interactively.
So for anyone looking to use mapbox customly then make sure too check out their static api over at: https://www.mapbox.com/api-documentation/#static

JavaScript map library with individual map

I would like to create my own map, based on the GoogleMaps functions. But not with the real world map. The map I want to create is a fantasy map. For example I want to make a map of „Middle Earth“ (Lord of the Ring) - not really but some kind like that :-)
I have already found some free libraries but this are always based on the real map of the earth.
It would be ok if it has only the simplest functions, like scrolling (zooming), add some pins or stuff like that.
No routing stuff needed...
You could use a mapping tool like http://leafletjs.com/ and load in custom tiles.
This guy used it I think to create an interactive map of Guild Wars 2 https://github.com/lpdumas/gw2cartographers I had a brief look at it a while ago, quite a lot of code
Another option for the mapping functionality would be OpenLayers, in practice it is fairly similar in usage to the Google Maps API if you have any experience with this. It's open source and easy to use.
You will however have to provide your own custom map tiles.

Javascript v3 Google maps rotate map

I cant seem to find anything about this anywhere. Its because i am trying to make the map rotate around the user. google maps javascript v3 doesnt seem to be doing this. wanting to ask google personally, their homepage directed me to stackoverflow. Is this at all possible? If not, have anyone heard the developers talk about implementing this feature in the future, or will it simple never be possible?
Compass datas aren't available in the JS API V3
Don't hesitate to refer to the documentation to see your possibilities using it
https://developers.google.com/maps/documentation/javascript/reference
Google also update frequently the experimental version of its API, you can follow the changes
https://developers.google.com/maps/documentation/javascript/3.exp/reference
Could be a fun project to work out with css3 options.
Just rotate the whole map container.
What about setHeading? I believe that rotates the entire frame relative to the cardinal directions.

How can I access, then animate an existing leaflet map polyline using Javascript?

Can anyone suggest how I can access then animate the red polyline here using javascript:
http://gymloop.lukem.co.uk (login: User2/pass2, then select 'Challenges')
I want to animate the polyline from the first marker to the end of the red line (think Indiana jones but without the map moving and NOT using google maps). It needs to be dynamic as different users will have travelled different distances.
I need thew solution to work in FF, IE7+ & Chrome
I am using cloudmade's leaflet maps and am keen to avoid using google maps.
There is further information in my related question at gis.stackexchange
I've checked out your code and it seems you're using the leaflet API to draw the lines. Because of that, I've decided to write a somewhat generic function that animated those kinds of lines. (By the way, I'm confused why that API uses path tags instead of line tags, but I've rolled with it.)
Here's the code: http://jsfiddle.net/mihaibirsan/Wzvre/
I'd like to polish it a bit more, but I wanted to put a foot in the door for that bounty. :D (I'll get back to polishing and post an update in a few hours, once I've done some other work.)
I highly recommend jquery_svg plugin. I've been using it and there are plenty of features, including animation, text on path, user interaction.

Categories