travelMap
This project extends the GMaps project and allow a building of map that shows a travel map.
Overview
I built this when I decided to travel around the world in a year. To create a map, you need GMaps and the Google Maps API. You can see it in action on my tour map:
Installation
You can either download the travelmap.js (or min.js) or you can just use bower to install it:
> bower install travelmap
Dependencies
This project depends on GMaps and the Google Maps API. The bower package installs the GMaps project as a dependency already. It does not require any other libraries (e.g. no jQuery). It shouldn't have any problems working with any libraries as far as I know.
Simple Usage
Before you can use the library, you need to include the Google API and GMaps libraries. Usually, you would include all three at once:
<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript" ></script>
<script src="/bower_components/gmaps/gmaps.js" type="text/javascript" ></script>
<script src="/bower_components/travelmap/travelmap.js" type="text/javascript" ></script>
// Your Script Goes Here
Once you have the scripts, it's usage is simply calling createMap and specifying the stops and selector:
// JavaScript
var map = travelMap.createMap({
stops: [
{
lat: 33.748995,
long: -84.387982,
info: "Atlanta, Georgia - Departed Jun 3, 2014"
},
{
lat: 48.856614,
long: 2.352222,
info: "Paris, France - Jun 4-24, 2014"
},
{
lat: 50.850000,
long: 4.350000,
info: "Brussels, Belgium - Jun 25-27, 2014"
}
],
selector: "#map"
});
Map Object
The map object that is returned from createMap contains three properties:
- map: The underlying GMaps object
- settings: The complete settings used to create the map. (readonly)
- currentStop: An object that represents the current stop on the trip. (readonly)
options
When you call createMap, you can specify any of the following options (defaults are shown here):
{
stops: [], // Array of the stops to show (required)
currentStop: 0, // Ordinal Position of current location
selector: "#map", // CSS Selector for container for the map
icon: { // Icon details
url: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAIAAABvrngfAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAA1JREFUGFdjoDNgYAAAAHIAAejt7scAAAAASUVORK5CYII=",
width: 3,
height: 3,
},
initialZoom: 4, // Initial Level of Zoom for the Google Map
pastStroke: { // Settings for the lines before the currentStop
color: '#190300',
opacity: 0.5,
weight: 2
},
futureStroke: { // Settings for hte lines after the currentStop
color: '#D30000',
opacity: 0.6,
weight: 2
},
mapOptions: { // Options for map (See GMaps for full list of options)
draggable: true,
scrollwheel: false,
disableDoubleClickZoom: true,
zoomControl: true
}
}
Summary
If you're interested in making changes, please add an issue and send me a pull request!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent