A simple starter map sample project to get you started with Mapfit maps!
For further documentation, please visit our Javascript page.
Single Point Map - A simple example showing how you can place a marker on a map using either lat/lng coordinates or a geocoded address.
More samples coming soon
You must declare the following stylesheets and scripts on your page to successfully render your maps.
<link href="http://cdn.mapfit.com/v2-4/assets/css/mapfit.css" rel='stylesheet' />
<script src="https://cdn.mapfit.com/v2-4/assets/js/tetragon.js"></script>
<script src="http://cdn.mapfit.com/v2-4/assets/js/mapfit.js"></script>
Next you must initiate the map so that you can customize and add markers to it.
let map = mapfit.MapView('mapfit', {theme: 'day'});
map.drawMap();
map.setZoom(18);
map.setMaxZoom(20);
map.setMinZoom(14);
Below you will find a list of example methods which will allow you to add markers, use custom icons, and track click events.
position = mapfit.LatLng([40.7461904, -73.988579])
myLatLngMarker = mapfit.Marker(position)
map.setCenter(position)
map.addMarker(myLatLngMarker);
let placeInfo = mapfit.PlaceInfo();
placeInfo.setTitle('Citi Bike');
placeInfo.setDescription('<p>Broadway & West 29th St)</br>Bikeshare</p>');
myLatLngMarker.setPlaceInfo(placeInfo);
Note: All geocoder related requests require an API KEY. Visit our Get Started page to get yours today.
myAddressMarker = mapfit.Marker()
myAddressMarker.address = "119 West 24th street, New York, NY, 11001"
map.addMarker(myAddressMarker);
let myCustomIcon = mapfit.Icon();
myCustomIcon.setIconUrl('http://cdn.mapfit.com/v2-4/assets/images/markers/custom/example-custom-pin.png');
myCustomIcon.setWidth(58);
myCustomIcon.setHeight(65);
myAddressMarker.setIcon(myCustomIcon);
myLatLngMarker.on('click', function(e) {
console.log('marker click')
})
Copyright (c) 2018 Mapfit, Inc. All Rights Reserved.