Permalink
Browse files

Add first draft of clustering

  • Loading branch information...
dhcole committed Jan 6, 2012
1 parent affaab8 commit 13dad7bd359608f610b7bef48cf4bd37643bf660
Showing with 1,303 additions and 76 deletions.
  1. +1 −5 README.md
  2. +22 −19 css/site.css
  3. +1,105 −1 example/random_geojson_points.geojson
  4. +1 −2 example/random_geojson_points.js
  5. +3 −46 index.html
  6. +4 −0 lib/jquery.js
  7. +3 −3 lib/modestmaps.min.js
  8. +31 −0 lib/underscore.js
  9. +1 −0 src/mmg.js
  10. +132 −0 src/site.js
View
@@ -1,5 +1 @@
-A simple HTML markers implementation for Modest Maps. Eats GeoJSON,
-produces HTML markers, positions them correctly.
-
-Using this code with a large number of markers is not recommended,
-and only `Point` geometries are supported.
+Building on
View
@@ -24,27 +24,30 @@ div.download a {
}
#map {
- border:2px solid #000;
- width:600px;
- height:300px;
-}
-
-.mmg-default {
- background:#aff379;
- border:1px solid #000;
+ width:100%;
+ height:100%;
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+}
+
+.marker {
+ background: rgba(51, 102, 153, .5);
+ border:1px solid rgba(51, 102, 153, 1);
display:block;
- width:10px;
- height:10px;
+ text-align: center;
}
-.my-custom {
- background:#222;
- border:2px solid #faf45a;
- color:#fff;
- display:block;
- padding:4px;
+.mmg-default {
+ background: yellow;
+ color: yellow;
+ width: 1px;
+ height: 1px;
}
-div.gist {
- font-size:11px;
-}
+.highlight {
+ border: 2px solid white;
+ color: white;
+}

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.
View
@@ -7,56 +7,13 @@
<script type='text/javascript' src='lib/modestmaps.js'></script>
<script type='text/javascript' src='lib/wax.mm.min.js'></script>
<script type='text/javascript' src='src/mmg.js'></script>
+ <script type='text/javascript' src='lib/jquery.js'></script>
+ <script type='text/javascript' src='lib/underscore.js'></script>
+ <script type='text/javascript' src='src/site.js'></script>
</head>
<body>
<div class='column'>
- <h2>mmg</h2>
<div id='map'></div>
- <div class='download'>download: <a href='https://raw.github.com/mapbox/mmg/gh-pages/src/mmg.js'>mmg.js</a></div>
- <p><strong>mmg</strong> is a quick method of getting GeoJSON
- into Modest Maps. It requires the Modest Maps 1.x.x work for the <code>addLayer</code>
- API. There are no other dependencies, and it's designed to work cross-browser.</p>
- <p>It's a chaining API, so the constructor, <code>mmg()</code>, takes no arguments,
- but returns an object with <code>.factory(function(x) { return elem; })</code> and
- <code>.geojson(obj)</code> methods. It'll accept any GeoJSON object - bring your own
- AJAX and JSON.parse if necessary.</p>
- <p>The <strong>factory method</strong> takes a GeoJSON feature object, and returns an
- HTML element that will be added as a marker for that feature. The element can have
- childNodes, and if you want the markers to be clickable, or any other interaction to be
- added, attach event listeners to the elements in your factory method.</p>
- <p>It's based heavily on <a href='https://github.com/shawnbot'>Shawn Allen's</a>
- GeoJSON example.</p>
- <script src="https://gist.github.com/1477030.js?file=example.js"></script>
</div>
- <script>
- wax.tilejson('http://a.tiles.mapbox.com/v3/tmcw.boldness.jsonp',
- function(tj) {
- var m = new MM.Map('map', new wax.mm.connector(tj))
- .setCenterZoom(new MM.Location(0, 0), 2);
-
- m.addLayer(mmg().geojson(random_geojson));
-
- var pt = { 'type': 'FeatureCollection',
- 'features': [{ 'type': 'Feature',
- 'geometry': {
- 'type': 'Point',
- 'coordinates': [-40.0, 30.0]
- },
- 'properties': { 'name': 'Tom' }
- }]};
-
- var tomLayer = mmg().factory(function(x) {
- var d = document.createElement('div');
- d.className = 'my-custom';
- d.innerHTML = x.properties.name;
- d.onclick = function() {
- alert('hi, ' + this.innerHTML);
- };
- return d;
- }).geojson(pt);
-
- m.addLayer(tomLayer);
- });
- </script>
</body>
</html>
View

Large diffs are not rendered by default.

Oops, something went wrong.
View

Large diffs are not rendered by default.

Oops, something went wrong.
View

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
View
@@ -9,6 +9,7 @@ function mmg() {
lastCoord = null;
var parent = document.createElement('div');
+ parent.className = 'geojson';
parent.style.cssText = 'position: absolute; top: 0px;' +
'left: 0px; width: 100%; height: 100%; margin: 0; padding: 0; z-index: 0';
Oops, something went wrong.

0 comments on commit 13dad7b

Please sign in to comment.