Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

e_markerclusterer

Package Overview
Dependencies
Maintainers
1
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

e_markerclusterer

  • 0.0.6.1
  • Rubygems
  • Socket score

Version published
Maintainers
1
Created
Source

Enhanced MarkerClusterer

Build Status Gem Version

Welcome to e_markerclusterer gem! This gem is a javascript to show various infographics on Google Map, which is based on Marker Clusterer Plus of Google Map Utilities V3 and infographic charts is derived from Chart Marker Clusterer by Hassan Mughal.

Requirement

  1. Gemfile

Add this line to your application's Gemfile:

gem 'e_markerclusterer'
  1. Replace Google Marker Clusterer

Replace below google script

Remove the line

<script src="//cdn.rawgit.com/mahnunchik/markerclustererplus/master/dist/markerclusterer.min.js"></script>

on your dom, and add this line on asset pipeline:

\\= require e_markerclusterer

If you use Google maps for Rails, add lines on asset pipeline:

\\= require e_markerclusterer
\\= require gmaps/google

Usage

e_markerclusterer gem basically works with Google maps for Rails. Only one difference is legend information.

  1. GeoJSON:

If you generate markers with sex legend, you should set title of markers for legend.

@users = User.all
@markers = Gmaps4rails.build_markers(@users) do |user, marker|
  marker.title user.sex
  marker.lat user.latitude
  marker.lng user.longitude
end
@legend = { 'male' => 1, 'female' => 2}
  1. HTML view:
<div style='width: 800px;'>
  <%= content_tag :div, id: "map", style: 'width: 800px; height: 400px;', data: { markers: @markers, legend: @legend } do %>
  <% end %>
</div>
  1. Javascript code:

Generate handle:

var handler;
google.charts.load('current', {'packages': ['corechart']});
handler = Gmaps.build('Google', {
  markers: {
    clusterer: {
      gridSize: 40,
      maxZoom: 10,
      styles: [{
        height: 60,
        width: 60
      }],
      legend: $('#map').data('legend')
    }
  }
});

And build map with markers:

handler.buildMap({
  provider: {
    mapTypeId: google.maps.MapTypeId.ROADMAP
  },
  internal: {
    id: 'map'
  }
}, function() {
  var markers;
  markers = gmapHandler.addMarkers($('#map').data('markers'));
});

Todo?

Feel free to contact us, you have your say.

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/sktivd/e_markerclusterer.

FAQs

Package last updated on 11 Nov 2016

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc