Skip to content

cedarmaps-sdk-web-public
cedarmaps-sdk-web-public
Commit c107a4da authored by Deployer's avatar Deployer
Browse files
Options

Added a marker clustering demo.

parent 78366e8e
Expand all Show whitespace changes
Inline Side-by-side
Showing with 161 additions and 0 deletions
demos/css/MarkerCluster.Default.css 0 → 100644
View file @ c107a4da
.marker-cluster-small {
background-color: rgba(181, 226, 140, 0.6);
}
.marker-cluster-small div {
background-color: rgba(110, 204, 57, 0.6);
}
.marker-cluster-medium {
background-color: rgba(241, 211, 87, 0.6);
}
.marker-cluster-medium div {
background-color: rgba(240, 194, 12, 0.6);
}
.marker-cluster-large {
background-color: rgba(253, 156, 115, 0.6);
}
.marker-cluster-large div {
background-color: rgba(241, 128, 23, 0.6);
}
/* IE 6-8 fallback colors */
.leaflet-oldie .marker-cluster-small {
background-color: rgb(181, 226, 140);
}
.leaflet-oldie .marker-cluster-small div {
background-color: rgb(110, 204, 57);
}
.leaflet-oldie .marker-cluster-medium {
background-color: rgb(241, 211, 87);
}
.leaflet-oldie .marker-cluster-medium div {
background-color: rgb(240, 194, 12);
}
.leaflet-oldie .marker-cluster-large {
background-color: rgb(253, 156, 115);
}
.leaflet-oldie .marker-cluster-large div {
background-color: rgb(241, 128, 23);
}
.marker-cluster {
background-clip: padding-box;
border-radius: 20px;
}
.marker-cluster div {
width: 30px;
height: 30px;
margin-left: 5px;
margin-top: 5px;
text-align: center;
border-radius: 15px;
font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif;
}
.marker-cluster span {
line-height: 30px;
}
\ No newline at end of file
demos/css/MarkerCluster.css 0 → 100644
View file @ c107a4da
.leaflet-cluster-anim .leaflet-marker-icon, .leaflet-cluster-anim .leaflet-marker-shadow {
-webkit-transition: -webkit-transform 0.3s ease-out, opacity 0.3s ease-in;
-moz-transition: -moz-transform 0.3s ease-out, opacity 0.3s ease-in;
-o-transition: -o-transform 0.3s ease-out, opacity 0.3s ease-in;
transition: transform 0.3s ease-out, opacity 0.3s ease-in;
}
.leaflet-cluster-spider-leg {
/* stroke-dashoffset (duration and function) should match with leaflet-marker-icon transform in order to track it exactly */
-webkit-transition: -webkit-stroke-dashoffset 0.3s ease-out, -webkit-stroke-opacity 0.3s ease-in;
-moz-transition: -moz-stroke-dashoffset 0.3s ease-out, -moz-stroke-opacity 0.3s ease-in;
-o-transition: -o-stroke-dashoffset 0.3s ease-out, -o-stroke-opacity 0.3s ease-in;
transition: stroke-dashoffset 0.3s ease-out, stroke-opacity 0.3s ease-in;
}
demos/js/leaflet.markercluster.js 0 → 100644
View file @ c107a4da
This diff is collapsed.
demos/marker-clustering.html 0 → 100644
View file @ c107a4da
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>CedarMaps - Basic Map Load with a Marker</title>
<script src='../dist/v1.8.0/cedarmaps.uncompressed.js'></script>
<script src='./js/leaflet.markercluster.js'></script>
<script src='../access-token.js'></script>
<link href='../dist/v1.8.0/cedarmaps.css' rel='stylesheet' />
<link href='./css/MarkerCluster.css' rel='stylesheet' />
<link href='./css/MarkerCluster.Default.css' rel='stylesheet' />
<style>
body {
margin: 0;
padding: 0;
}
.map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id='map' class='map'> </div>
<script>
try {
L.cedarmaps.accessToken = accessToken;
} catch (err) {
throw new Error('You need to get an access token to be able to use cedarmaps SDK. ' +
'Send us an email to <info@cedar.ir>');
}
/**
* Initilizing Map View
*/
// Getting maps info from a tileJSON source
var tileJSONUrl = 'https://api.cedarmaps.com/v1/tiles/cedarmaps.streets.json?access_token=' + L.cedarmaps.accessToken;
// initilizing map into div#map
var map = L.cedarmaps.map('map', tileJSONUrl, {
scrollWheelZoom: true,
zoomControl: false,
minZoom: 7,
maxZoom: 17,
maxBounds: [
[25.064, 44.039],
[39.771, 63.322]
], // Iran's bounding box
}).setView([35.757448286487595, 51.40876293182373], 7);
var zoomControl = new L.Control.Zoom({ position: 'topleft' });
zoomControl.addTo(map);
// These are some random points in Iran, which we are going to make a cluster out of them. Each point has coordinates and
// a random popup content which is simply an incremental number. If you later click on any marker, a popup shows with that
// number.
var addressPoints = [{"lat":35.55904339525896,"lng":51.36108398437501,"popupContent":"1"},{"lat":35.62158189955968,"lng":51.55883789062501,"popupContent":"2"},{"lat":35.45172093634465,"lng":51.67968750000001,"popupContent":"3"},{"lat":35.47856499535729,"lng":51.32812500000001,"popupContent":"4"},{"lat":35.68407153314097,"lng":51.19628906250001,"popupContent":"5"},{"lat":35.69299463209881,"lng":51.427001953125,"popupContent":"6"},{"lat":35.576916524038616,"lng":51.36108398437501,"popupContent":"7"},{"lat":35.576916524038616,"lng":51.19628906250001,"popupContent":"8"},{"lat":35.63051198300061,"lng":51.22924804687501,"popupContent":"9"},{"lat":35.66622234103479,"lng":51.35009765625001,"popupContent":"10"},{"lat":35.7019167328534,"lng":51.448974609375,"popupContent":"11"},{"lat":35.71975793933433,"lng":51.54785156250001,"popupContent":"12"},{"lat":35.65729624809628,"lng":51.51489257812501,"popupContent":"13"},{"lat":35.60371874069731,"lng":51.427001953125,"popupContent":"14"},{"lat":35.65729624809628,"lng":51.30615234375001,"popupContent":"15"},{"lat":35.594785665487244,"lng":51.097412109375,"popupContent":"16"},{"lat":36.27970720524017,"lng":59.57885742187501,"popupContent":"17"},{"lat":36.20882309283712,"lng":59.76562500000001,"popupContent":"18"},{"lat":36.27085020723905,"lng":59.76562500000001,"popupContent":"19"},{"lat":36.24427318493909,"lng":59.710693359375,"popupContent":"20"},{"lat":36.1822249804225,"lng":59.69970703125,"popupContent":"21"},{"lat":36.1822249804225,"lng":59.710693359375,"popupContent":"22"},{"lat":36.30627216957992,"lng":59.73266601562501,"popupContent":"23"},{"lat":36.20882309283712,"lng":59.68872070312501,"popupContent":"24"},{"lat":36.217687122250574,"lng":59.62280273437501,"popupContent":"25"},{"lat":36.15561783381855,"lng":59.68872070312501,"popupContent":"26"},{"lat":32.602361666817515,"lng":51.64672851562501,"popupContent":"27"},{"lat":32.62087018318113,"lng":51.66870117187501,"popupContent":"28"},{"lat":32.65325087996883,"lng":51.70715332031251,"popupContent":"29"},{"lat":32.648625783736726,"lng":51.66870117187501,"popupContent":"30"},{"lat":32.704111144407406,"lng":51.61376953125001,"popupContent":"31"},{"lat":32.690243035492266,"lng":51.50390625000001,"popupContent":"32"},{"lat":32.63474905974431,"lng":51.5972900390625,"popupContent":"33"},{"lat":32.59310597426537,"lng":51.55883789062501,"popupContent":"34"},{"lat":32.588477769459146,"lng":51.712646484375,"popupContent":"35"},{"lat":32.532920675187846,"lng":51.67968750000001,"popupContent":"36"},{"lat":29.599730094380433,"lng":52.54211425781251,"popupContent":"37"},{"lat":29.585400203408376,"lng":52.54211425781251,"popupContent":"38"},{"lat":29.544787796199465,"lng":52.60253906250001,"popupContent":"39"},{"lat":29.585400203408376,"lng":52.54211425781251,"popupContent":"40"},{"lat":29.594953690210986,"lng":52.49267578125001,"popupContent":"41"},{"lat":29.573457073017593,"lng":52.5091552734375,"popupContent":"42"},{"lat":29.530450107491063,"lng":52.53936767578126,"popupContent":"43"},{"lat":29.5830116903775,"lng":52.57507324218751,"popupContent":"44"},{"lat":29.614057949691468,"lng":52.52563476562501,"popupContent":"45"},{"lat":29.573457073017593,"lng":52.50640869140626,"popupContent":"46"},{"lat":29.566290516578164,"lng":52.58056640625001,"popupContent":"47"},{"lat":29.59017705987947,"lng":52.55584716796876,"popupContent":"48"},{"lat":29.591371238663804,"lng":52.540740966796875,"popupContent":"49"},{"lat":29.56270704764342,"lng":52.53936767578126,"popupContent":"50"},{"lat":29.581817412664478,"lng":52.518768310546875,"popupContent":"51"},{"lat":29.6200272884574,"lng":52.5091552734375,"popupContent":"52"},{"lat":29.62360872200976,"lng":52.4871826171875,"popupContent":"53"},{"lat":29.602118211647333,"lng":52.49404907226563,"popupContent":"54"},{"lat":29.594953690210986,"lng":52.54348754882813,"popupContent":"55"},{"lat":29.621221113784504,"lng":52.56134033203125,"popupContent":"56"},{"lat":29.560317997724837,"lng":52.60253906250001,"popupContent":"57"}];
// This example makes use of a leaflet plugin.
// For more information on how to use other features of this plugin, please read its docs:
// https://github.com/Leaflet/Leaflet.markercluster#using-the-plugin
var markers = L.markerClusterGroup();
for (var i = 0; i < addressPoints.length; i++) {
var point = addressPoints[i];
var popupContent = point["popupContent"];
var marker = L.marker(new L.LatLng(point["lat"], point["lng"]), { title: popupContent });
marker.bindPopup(popupContent);
markers.addLayer(marker);
}
map.addLayer(markers);
</script>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment