-
Notifications
You must be signed in to change notification settings - Fork 132
Home
Welcome to the Mapstraction documentation wiki. Let's jump in!
Starting with Mapstraction is super easy. It requires just 3 steps:
- Include the map provider's Javascript library (e.g. Google, OpenLayers, Leaflet, et al.)
- Include the Mapstraction Javascript Library and providers
- Create a map in Javascript and put it in an HTML element
A full working example looks like:
<html>
<head>
<title>Mapstraction Simple Example</title>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script src="https://raw.github.com/mapstraction/mxn/master/source/mxn.js?(openlayers)" type="text/javascript"></script>
</head>
<body>
<div id="mapdiv" style="height: 400px;"></div>
<script type="text/javascript">
var map = new mxn.Mapstraction('mapdiv', 'openlayers');
var latlon = new mxn.LatLonPoint(39.74,-104.98);
map.setCenterAndZoom(latlon, 10);
</script>
</body>
</html>Save that to a file on your webserver and open in a web browser and you're now running Mapstraction!
But wait... there's more! Once you've started playing with Mapstraction you can dive in to learn more about how to extend and modify it for your own needs.
- Download the latest Zip package from the downloads page
- Unzip it into the folder with the rest of your site's JavaScript
- Decide which provider you're going to start with and if they use an API key then sign up for one
- Add something like this to your site
<html>
<head>
<!-- jQuery is not required for Mapstraction, but demonstrated here to show integration -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="<URL for chosen provider map API here>"></script>
<script type="text/javascript" src="js/mxn.js?(<mxn id for your chosen provider here>)"></script>
<script type="text/javascript">
$(document).ready(function() {
var map = new mxn.Mapstraction('mapdiv', '<mxn id for your chosen provider here>');
});
</script>
</head>
<body>
<div id="mapdiv" style="width: 800px; height: 470px;"></div>
</body>
</html>- Play with the "sandbox demos"
- Take a look at the "API Documentation"
- Sign up to the "mailing list"
- Create your first Mapstraction app
Any of the following "mxn id's" are supported, as long as you also include the provider's Javascript library.
cartociudad, cloudmade, geocommons, google, googlev3, mapquest, microsoft, multimap, openlayers, openspace, ovi, yahoo, yandex
Head over to the Contributing page to read up on how you can contribute to the project.
You can also learn more and follow news on the Mapstraction Home Page