No description, website, or topics provided.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
Markers
Polygons
images
.dockerignore
.gitignore
Dockerfile
README.md
default.conf
nginx.conf
single-point-map-example.html

README.md

Starter Map for Web Banner

Starter Map for Web

A simple starter map sample project to get you started with Mapfit maps!

For further documentation, please visit our Javascript page.

Samples

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

Setup your map

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.

DRAW YOUR MAP
let map = mapfit.MapView('mapfit', {theme: 'day'});
map.drawMap();
OPTIONAL ZOOM LEVEL CONTROLS
map.setZoom(18);
map.setMaxZoom(20);
map.setMinZoom(14);

Methods

Below you will find a list of example methods which will allow you to add markers, use custom icons, and track click events.

ADD A MARKER CALLED "myLatLngMarker" VIA LAT/LNG COORDINATES
position = mapfit.LatLng([40.7461904, -73.988579])
myLatLngMarker = mapfit.Marker(position)
map.setCenter(position)
map.addMarker(myLatLngMarker);
ADD PLACE INFO TO YOUR MARKER
let placeInfo = mapfit.PlaceInfo();
placeInfo.setTitle('Citi Bike');
placeInfo.setDescription('<p>Broadway & West 29th St)</br>Bikeshare</p>');
myLatLngMarker.setPlaceInfo(placeInfo);
ADD A MARKER CALLED "myAddressMarker" VIA GEOCODER

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);
SET A CUSTOM ICON FOR A MARKER
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);
TRACK MARKER CLICKS
myLatLngMarker.on('click', function(e) {
  console.log('marker click')
})

License

Copyright (c) 2018 Mapfit, Inc. All Rights Reserved.