arbo77/index.html

## index.html
<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <link rel="stylesheet" href="http://dev.openlayers.org/theme/default/style.css" type="text/css">
  <link rel="stylesheet" href="http://dev.openlayers.org/examples/style.css" type="text/css">
  <script src="http://dev.openlayers.org/OpenLayers.js"></script>
  <script src="http://www.acuriousanimal.com/AnimatedCluster/AnimatedCluster.js"></script>
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
    }

    .smallmap {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: auto;
      height: auto;
    }
  </style>
</head>

<body onload="init()">
  <div id="map" class="smallmap"></div>
  <script>
    var map;

    function init() {

      var map1 = new OpenLayers.Map("map");
      var osm1 = new OpenLayers.Layer.OSM();
      map1.addLayer(osm1);
      var center = new OpenLayers.LonLat(2, 40);
      center.transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"));
      map1.setCenter(center, 2);
      map1.addControl(new OpenLayers.Control.LayerSwitcher());
      var colors = {
        low: "rgb(181, 226, 140)",
        middle: "rgb(241, 211, 87)",
        high: "rgb(253, 156, 115)",
        red: "rgb(243, 28, 28)",
      };


      var point = {
        office: [
          new OpenLayers.Rule({
            filter: new OpenLayers.Filter.Comparison({
              type: OpenLayers.Filter.Comparison.LESS_THAN,
              property: "count",
              value: 2
            }),
            symbolizer: {
              fillColor: colors.red,
              strokeWidth: 0,
              fillOpacity: 0.9,
              pointRadius: 5,
            }
          }),
          new OpenLayers.Rule({
            filter: new OpenLayers.Filter.Comparison({
              type: OpenLayers.Filter.Comparison.GREATER_THAN,
              property: "count",
              value: 1
            }),
            symbolizer: {
              cursor: 'pointer',
              fillColor: colors.high,
              fillOpacity: 1,
              strokeColor: colors.high,
              strokeOpacity: 0.5,
              strokeWidth: 12,
              pointRadius: 20,
              label: "${count}",
              labelOutlineWidth: .5,
              fontColor: "#ffffff",
              fontOpacity: 0.8,
              fontSize: "12px"
            }
          })
        ],
        wo: [
          new OpenLayers.Rule({
            filter: new OpenLayers.Filter.Comparison({
              type: OpenLayers.Filter.Comparison.LESS_THAN,
              property: "count",
              value: 2
            }),
            symbolizer: {
              fillColor: colors.low,
              strokeWidth: 0,
              fillOpacity: 0.9,
              pointRadius: 5,
            }
          }),
          new OpenLayers.Rule({
            filter: new OpenLayers.Filter.Comparison({
              type: OpenLayers.Filter.Comparison.GREATER_THAN,
              property: "count",
              value: 1
            }),
            symbolizer: {
              cursor: 'pointer',
              fillColor: colors.low,
              fillOpacity: 1,
              strokeColor: colors.low,
              strokeOpacity: 0.5,
              strokeWidth: 12,
              pointRadius: 20,
              label: "${count}",
              labelOutlineWidth: .5,
              fontColor: "#ffffff",
              fontOpacity: 0.8,
              fontSize: "12px"
            }
          })
        ],
      }

      function createVector(src, style) {
        v = new OpenLayers.Layer.Vector("Features", {
          protocol: new OpenLayers.Protocol.HTTP({
            url: src,
            format: new OpenLayers.Format.GeoJSON()
          }),
          eventListeners: {
            'featureselected': function (evt) {
              var feature = evt.feature;
              console.log(feature.cluster.length);
              if (feature.cluster.length === 1) {
                alert(JSON.stringify(feature.cluster[0].data));
              } else {
                map1.zoomIn();
              }
            }
          },
          renderers: ['Canvas', 'SVG'],
          strategies: [
            new OpenLayers.Strategy.Fixed(),
            new OpenLayers.Strategy.Cluster({
              distance: 45,
            }),
          ],
          styleMap: new OpenLayers.StyleMap(style)
        })
        var selectControl = new OpenLayers.Control.SelectFeature(v, {});
        map1.addControl(selectControl);
        selectControl.activate();
        return v;
      }

      var vector1 = createVector('others.json', new OpenLayers.Style(null, {
        rules: point.office
      }));
      map1.addLayer(vector1);

      var vector2 = createVector('others2.json', new OpenLayers.Style(null, {
        rules: point.wo
      }));
      map1.addLayer(vector2);

    }

  </script>
</body>

</html>

## others.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              others.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## others2.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              others2.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
	<!DOCTYPE html>
	<html>

	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<link rel="stylesheet" href="http://dev.openlayers.org/theme/default/style.css" type="text/css">
	<link rel="stylesheet" href="http://dev.openlayers.org/examples/style.css" type="text/css">
	<script src="http://dev.openlayers.org/OpenLayers.js"></script>
	<script src="http://www.acuriousanimal.com/AnimatedCluster/AnimatedCluster.js"></script>
	<style>
	body {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
	}

	.smallmap {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: auto;
	height: auto;
	}
	</style>
	</head>

	<body onload="init()">
	<div id="map" class="smallmap"></div>
	<script>
	var map;

	function init() {

	var map1 = new OpenLayers.Map("map");
	var osm1 = new OpenLayers.Layer.OSM();
	map1.addLayer(osm1);
	var center = new OpenLayers.LonLat(2, 40);
	center.transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"));
	map1.setCenter(center, 2);
	map1.addControl(new OpenLayers.Control.LayerSwitcher());
	var colors = {
	low: "rgb(181, 226, 140)",
	middle: "rgb(241, 211, 87)",
	high: "rgb(253, 156, 115)",
	red: "rgb(243, 28, 28)",
	};


	var point = {
	office: [
	new OpenLayers.Rule({
	filter: new OpenLayers.Filter.Comparison({
	type: OpenLayers.Filter.Comparison.LESS_THAN,
	property: "count",
	value: 2
	}),
	symbolizer: {
	fillColor: colors.red,
	strokeWidth: 0,
	fillOpacity: 0.9,
	pointRadius: 5,
	}
	}),
	new OpenLayers.Rule({
	filter: new OpenLayers.Filter.Comparison({
	type: OpenLayers.Filter.Comparison.GREATER_THAN,
	property: "count",
	value: 1
	}),
	symbolizer: {
	cursor: 'pointer',
	fillColor: colors.high,
	fillOpacity: 1,
	strokeColor: colors.high,
	strokeOpacity: 0.5,
	strokeWidth: 12,
	pointRadius: 20,
	label: "${count}",
	labelOutlineWidth: .5,
	fontColor: "#ffffff",
	fontOpacity: 0.8,
	fontSize: "12px"
	}
	})
	],
	wo: [
	new OpenLayers.Rule({
	filter: new OpenLayers.Filter.Comparison({
	type: OpenLayers.Filter.Comparison.LESS_THAN,
	property: "count",
	value: 2
	}),
	symbolizer: {
	fillColor: colors.low,
	strokeWidth: 0,
	fillOpacity: 0.9,
	pointRadius: 5,
	}
	}),
	new OpenLayers.Rule({
	filter: new OpenLayers.Filter.Comparison({
	type: OpenLayers.Filter.Comparison.GREATER_THAN,
	property: "count",
	value: 1
	}),
	symbolizer: {
	cursor: 'pointer',
	fillColor: colors.low,
	fillOpacity: 1,
	strokeColor: colors.low,
	strokeOpacity: 0.5,
	strokeWidth: 12,
	pointRadius: 20,
	label: "${count}",
	labelOutlineWidth: .5,
	fontColor: "#ffffff",
	fontOpacity: 0.8,
	fontSize: "12px"
	}
	})
	],
	}

	function createVector(src, style) {
	v = new OpenLayers.Layer.Vector("Features", {
	protocol: new OpenLayers.Protocol.HTTP({
	url: src,
	format: new OpenLayers.Format.GeoJSON()
	}),
	eventListeners: {
	'featureselected': function (evt) {
	var feature = evt.feature;
	console.log(feature.cluster.length);
	if (feature.cluster.length === 1) {
	alert(JSON.stringify(feature.cluster[0].data));
	} else {
	map1.zoomIn();
	}
	}
	},
	renderers: ['Canvas', 'SVG'],
	strategies: [
	new OpenLayers.Strategy.Fixed(),
	new OpenLayers.Strategy.Cluster({
	distance: 45,
	}),
	],
	styleMap: new OpenLayers.StyleMap(style)
	})
	var selectControl = new OpenLayers.Control.SelectFeature(v, {});
	map1.addControl(selectControl);
	selectControl.activate();
	return v;
	}

	var vector1 = createVector('others.json', new OpenLayers.Style(null, {
	rules: point.office
	}));
	map1.addLayer(vector1);

	var vector2 = createVector('others2.json', new OpenLayers.Style(null, {
	rules: point.wo
	}));
	map1.addLayer(vector2);

	}

	</script>
	</body>

	</html>