Zoom/Pan'+a.replace("#697379","white")+'Zoom/Pan '+this.opts.basemapCredit+"
";this.$el.html(b)},Pinpoint.prototype.setAspectRatio=function(){var a={tall:1.2,square:1,wide:2/3},b=a[this.opts["aspect-ratio"]],c=this.$el.find(".map-inner").width()*b;this.$el.find(".map-inner, .map-cover").height(c),this.map&&this.map.invalidateSize()},Pinpoint.prototype.onWindowResize=function(){this.setAspectRatio(),$(window).trigger("resize")},Pinpoint.prototype.setupMap=function(a){var b=this.opts,c=b.zoom+1,d=b.zoom-1;a&&a.nozoomlimits&&(c=20,d=1);var e={scrollWheelZoom:!0,keyboard:!1,maxZoom:c,minZoom:d,attributionControl:!1},f=this.$el.find(".map-inner")[0];this.map=L.map(f,e).setView([b.lat,b.lon],b.zoom),L.control.scale({position:"topright"}).addTo(this.map);var g=this.$el.find(".leaflet-control-scale.leaflet-control");g.find(".leaflet-control-scale-line").eq(0).detach().appendTo(g),L.tileLayer(this.opts.basemap).addTo(this.map),b.dragend&&this.map.on("dragend",b.dragend),b.zoomend&&this.map.on("zoomend",b.zoomend)},Pinpoint.prototype.addMarker=function(a,b){this.markers=this.markers||[],a.icon=a.icon||"circle";var c=L.divIcon({className:"marker-icon marker-icon-"+a.icon}),d=L.marker([a.lat,a.lon],{icon:c,draggable:this.opts.creation,title:b}).addTo(this.map);a.label=a.label||"plain";var e=a["label-direction"]||"north";if("callout"===a.label)var f=L.divIcon({className:"marker-label-callout "+e,html:''+a.text+"
"});else if("plain"===a.label)var f=L.divIcon({className:"marker-label-plain "+e,html:''+a.text+"
"});var g=L.marker([a.lat,a.lon],{icon:f}).addTo(this.map),h=this.$el.find(".marker-inner").eq(-1);h.css("margin-left",-h.outerWidth()/2),setTimeout(function(){h.css("margin-left",-h.outerWidth()/2)}.bind(this),100),this.opts.markerdragend&&d.on("dragend",this.opts.markerdragend),this.markers.push({icon:d,text:g})},Pinpoint.prototype.addMinimap=function(){var a=L.tileLayer(this.opts.basemap,{attribution:""}),b=new L.Control.MiniMap(a,{zoomLevelOffset:this.opts["minimap-zoom-offset"]||-5,width:100,height:100,aimingRectOptions:{color:"black",weight:1,opacity:1,fillColor:"#999",fillOpacity:0}}).addTo(this.map);b._miniMap.dragging.disable(),b._miniMap.touchZoom.disable(),b._miniMap.doubleClickZoom.disable(),b._miniMap.scrollWheelZoom.disable(),b._miniMap.tap&&b._miniMap.tap.disable()},Pinpoint.prototype.calcBounds=function(){function a(a){var b=1/3,c=a.getBounds(),d=Math.abs(c._southWest.lng-c._northEast.lng)*b,e=Math.abs(c._southWest.lat-c._northEast.lat)*b,f={lat:c._southWest.lat-e,lng:c._southWest.lng-d},g={lat:c._northEast.lat+e,lng:c._northEast.lng+d};return L.latLngBounds(f,g)}var b=a(this.map);this.map.setMaxBounds(b)},Pinpoint.prototype.fillText=function(){this.opts.hed&&this.opts.hed.length>0?this.$el.find(".pinpoint-hed").text(this.opts.hed):this.$el.find(".pinpoint-hed").hide(),this.opts.dek&&this.opts.dek.length>0?this.$el.find(".pinpoint-dek").text(this.opts.dek):this.$el.find(".pinpoint-dek").hide(),this.opts.note&&this.opts.note.length>0?this.$el.find(".pinpoint-note").html(this.opts.note):this.$el.find(".pinpoint-note").hide(),this.$el.find(".pinpoint-hed:visible(), .pinpoint-dek:visible()").eq(0).addClass("pinpoint-topline")},Pinpoint.prototype.disableInteraction=function(){this.map;return this.$el.find(".map-outer").addClass("inactive"),this},Pinpoint.prototype.enableInteraction=function(){this.map;return this.$el.find(".map-outer").removeClass("inactive"),this},Pinpoint.prototype.remove=function(){this.map.remove(),this.$el.empty()},Pinpoint.prototype.addGeoJSON=function(a){function b(a,b){for(var c=0;c
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/example/index.htm b/example/index.htm
new file mode 100644
index 0000000..1a4f320
--- /dev/null
+++ b/example/index.htm
@@ -0,0 +1,58 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..db948d9
--- /dev/null
+++ b/package.json
@@ -0,0 +1,9 @@
+{
+ "devDependencies": {
+ "grunt": "~0.4.1",
+ "grunt-contrib-concat": "~0.3.0",
+ "grunt-contrib-uglify": "~0.2.7",
+ "grunt-contrib-watch": "~0.5.3",
+ "grunt-contrib-sass": "~0.6.0"
+ }
+}
diff --git a/src/img/pointer-highlight.svg b/src/img/pointer-highlight.svg
new file mode 100644
index 0000000..286e046
--- /dev/null
+++ b/src/img/pointer-highlight.svg
@@ -0,0 +1,10 @@
+
+
+
+
diff --git a/src/img/pointer.svg b/src/img/pointer.svg
new file mode 100644
index 0000000..20f9aac
--- /dev/null
+++ b/src/img/pointer.svg
@@ -0,0 +1,10 @@
+
+
+
+
diff --git a/src/js/pinpoint.js b/src/js/pinpoint.js
new file mode 100644
index 0000000..f5a5c57
--- /dev/null
+++ b/src/js/pinpoint.js
@@ -0,0 +1,324 @@
+/*
+ Pinpoint v1.0.0
+*/
+
+function Pinpoint(opts){
+ 'use strict';
+
+ var that = this;
+ this.opts = opts;
+ this.opts.el = this.opts.el || '#map-el';
+ this.$el = $(this.opts.el);
+ this.opts.basemap = opts.basemap || 'http://{s}.tile.osm.org/{z}/{x}/{y}.png';
+ this.opts.basemapCredit = opts.basemapCredit || 'Leaflet | © OpenStreetMap contributors';
+
+ this.addElements();
+ this.fillText();
+ this.setAspectRatio();
+ this.setupMap();
+ this.calcBounds();
+
+ this.disableInteraction();
+
+ if (this.opts.creation) {
+ this.enableInteraction();
+ this.map.remove();
+ this.map.setMaxBounds( null );
+ this.setupMap({nozoomlimits: true});
+
+ }
+
+ this.$el.find('.map-outer').click( this.enableInteraction.bind(that) );
+
+ if (opts.minimap) {
+ this.addMinimap();
+ }
+
+ for (var i = 0; i < opts.markers.length; i++) {
+ this.addMarker(opts.markers[i], i);
+ }
+
+ console.log(opts);
+ if (opts.geojson) {
+ this.addGeoJSON(opts.geojson);
+ }
+
+ if (typeof Iframe !== 'undefined') {
+ var fm = Iframe.init();
+ }
+ if ($(window).smartresize) {
+ $(window).smartresize( this.onWindowResize.bind(that) );
+ }
+}
+
+Pinpoint.prototype.addElements = function(){
+
+ var pointer = '';
+ var html = ''+
+ ''+
+ ''+
+ '
'+
+ '
'+pointer+'Zoom/Pan'+
+ '
'+pointer.replace('#697379','white')+'Zoom/Pan'+
+ '
'+
+ '
'+this.opts.basemapCredit+'
';
+ this.$el.html( html );
+}
+
+Pinpoint.prototype.setAspectRatio = function(){
+
+ var aspectRatios = {
+ "tall": 1.2,
+ "square": 1,
+ "wide": (2/3)
+ };
+
+ var aspectRatio = aspectRatios[this.opts['aspect-ratio']];
+ var newHeight = this.$el.find('.map-inner').width() * aspectRatio;
+ this.$el.find('.map-inner, .map-cover').height( newHeight );
+
+ if (this.map) {
+ this.map.invalidateSize();
+ }
+
+}
+
+Pinpoint.prototype.onWindowResize = function(){
+ this.setAspectRatio();
+ $(window).trigger('resize');
+ // this.map.setView([this.opts.lat, this.opts.lon]);
+}
+
+Pinpoint.prototype.setupMap = function(mapopts){
+
+ var opts = this.opts;
+
+ var maxZoom = opts.zoom +1;
+ var minZoom = opts.zoom -1;
+ if (mapopts && mapopts.nozoomlimits) {
+ maxZoom = 20;
+ minZoom = 1;
+ }
+
+ var mapOptions = {
+ scrollWheelZoom: true,
+ keyboard: false,
+ maxZoom: maxZoom,
+ minZoom: minZoom,
+ attributionControl: false
+ };
+
+ var mapEl = this.$el.find('.map-inner')[0];
+ this.map = L.map(mapEl, mapOptions)
+ .setView([opts.lat, opts.lon], opts.zoom);
+ L.control.scale({ position: 'topright' }).addTo(this.map); // scale bar
+ // put miles on top of km
+ var $scaleParent = this.$el.find('.leaflet-control-scale.leaflet-control');
+ $scaleParent.find('.leaflet-control-scale-line').eq(0).detach().appendTo($scaleParent);
+
+ L.tileLayer(this.opts.basemap).addTo(this.map);
+
+ if (opts.dragend) {
+ this.map.on('dragend',opts.dragend);
+ }
+ if (opts.zoomend) {
+ this.map.on('zoomend',opts.zoomend);
+ }
+
+}
+
+Pinpoint.prototype.addMarker = function(mopts, index){
+ this.markers = this.markers || [];
+ mopts.icon = mopts.icon || 'circle';
+ // set the icon type
+ var squareIcon = L.divIcon({
+ className: 'marker-icon marker-icon-'+mopts.icon
+ });
+ var icon = L.marker(
+ [mopts.lat, mopts.lon],
+ {
+ icon: squareIcon,
+ draggable: this.opts.creation,
+ title: index
+ }
+ ).addTo(this.map);
+ mopts.label = mopts.label || 'plain';
+ var labelDir = mopts["label-direction"] || 'north';
+ if (mopts.label === 'callout') {
+ var textBox = L.divIcon({
+ className: 'marker-label-callout '+labelDir,
+ html: ''+mopts.text+'
'
+ });
+ } else if (mopts.label === 'plain') {
+ var textBox = L.divIcon({
+ className: 'marker-label-plain '+labelDir,
+ html: ''+mopts.text+'
'
+ });
+ }
+ var text = L.marker(
+ [mopts.lat, mopts.lon],
+ {
+ icon: textBox
+ }
+ ).addTo(this.map);
+
+ // you can set .my-div-icon styles in CSS
+
+ // L.marker([50.505, 30.57]).addTo(map);
+
+ var $mi = this.$el.find('.marker-inner').eq(-1);
+ $mi.css( 'margin-left', -$mi.outerWidth()/2 );
+ setTimeout((function(){
+ $mi.css( 'margin-left', -$mi.outerWidth()/2 );
+ }).bind(this),100);
+
+ if (this.opts.markerdragend) {
+ icon.on('dragend', this.opts.markerdragend);
+ }
+
+ this.markers.push({
+ icon: icon,
+ text: text
+ });
+}
+
+Pinpoint.prototype.addMinimap = function(){
+ var minitiles = L.tileLayer(
+ this.opts.basemap, {
+ attribution: ''
+ });
+
+ var miniMap = new L.Control.MiniMap(minitiles, {
+ zoomLevelOffset: this.opts['minimap-zoom-offset'] || -5,
+ width: 100,
+ height: 100,
+ aimingRectOptions: {
+ color: 'black',
+ weight: 1,
+ opacity: 1,
+ fillColor: '#999',
+ fillOpacity: 0
+ }
+ }).addTo(this.map);
+
+ // Disable drag and zoom handlers.
+ miniMap._miniMap.dragging.disable();
+ miniMap._miniMap.touchZoom.disable();
+ miniMap._miniMap.doubleClickZoom.disable();
+ miniMap._miniMap.scrollWheelZoom.disable();
+
+ // Disable tap handler, if present.
+ if (miniMap._miniMap.tap) miniMap._miniMap.tap.disable();
+
+
+}
+
+Pinpoint.prototype.calcBounds = function(){
+ var that = this;
+
+ var bounds = calcNewMaxBounds(this.map);
+ this.map.setMaxBounds( bounds );
+
+ function calcNewMaxBounds(map){
+ // add an extra 30% margin to bounds
+ var boundScaleFactor = 1/3;
+
+ var current = map.getBounds();
+ var hori = Math.abs( current._southWest.lng - current._northEast.lng ) * boundScaleFactor;
+ var vert = Math.abs( current._southWest.lat - current._northEast.lat ) * boundScaleFactor;
+ var southWest = {
+ lat: current._southWest.lat - vert,
+ lng: current._southWest.lng - hori
+ }
+ var northEast = {
+ lat: current._northEast.lat + vert,
+ lng: current._northEast.lng + hori
+ }
+ return L.latLngBounds(southWest, northEast);
+
+ }
+}
+
+Pinpoint.prototype.fillText = function(){
+ if (this.opts.hed && (this.opts.hed.length > 0)) {
+ this.$el.find('.pinpoint-hed').text( this.opts.hed );
+ } else {
+ this.$el.find('.pinpoint-hed').hide();
+ }
+ if (this.opts.dek && (this.opts.dek.length > 0)) {
+ this.$el.find('.pinpoint-dek').text( this.opts.dek );
+ } else {
+ this.$el.find('.pinpoint-dek').hide();
+ }
+ if (this.opts.note && (this.opts.note.length > 0)) {
+ this.$el.find('.pinpoint-note').html( this.opts.note );
+ } else {
+ this.$el.find('.pinpoint-note').hide();
+ }
+ this.$el.find('.pinpoint-hed:visible(), .pinpoint-dek:visible()').eq(0).addClass('pinpoint-topline');
+}
+
+Pinpoint.prototype.disableInteraction = function(){
+ var map = this.map;
+ this.$el.find('.map-outer').addClass('inactive');
+ // map.dragging.disable();
+ // map.touchZoom.disable();
+ // map.doubleClickZoom.disable();
+ // // map.scrollWheelZoom.disable();
+ // map.boxZoom.disable();
+ // map.keyboard.disable();
+ return this;
+}
+
+Pinpoint.prototype.enableInteraction = function(){
+ var map = this.map;
+ this.$el.find('.map-outer').removeClass('inactive');
+ // map.dragging.enable();
+ // map.touchZoom.enable();
+ // map.doubleClickZoom.enable();
+ // // map.scrollWheelZoom.enable();
+ // map.boxZoom.enable();
+ // map.keyboard.enable();
+ return this;
+}
+
+Pinpoint.prototype.remove = function(){
+ this.map.remove();
+ this.$el.empty();
+}
+
+Pinpoint.prototype.addGeoJSON = function(geojson){
+ var map = this.map;
+ var features = geojson.features;
+ console.log(features);
+ for (var i = 0; i < features.length; i++) {
+ if (features[i].geometry && features[i].geometry) {
+ if (features[i].properties && features[i].properties.pinpointStyle) {
+ var styleName = features[i].properties.pinpointStyle;
+ } else {
+ var styleName = '';
+ }
+ var type = features[i].geometry.type;
+ if ( isOneOf( type, ["LineString", "MultiLineString", "Polygon", "MultiPolygon"]) ) {
+ L.geoJson(features[i].geometry, {
+ style: {
+ className: 'pinpoint-geojson '+styleName
+ }
+ }).addTo(map);
+
+ }
+ }
+ }
+
+ function isOneOf( needle, haystack ){
+ for (var i = 0; i < haystack.length; i++) {
+ if (haystack[i] === needle) {
+ return true;
+ }
+ }
+ return false;
+ }
+}
+
diff --git a/src/scss/geojson.scss b/src/scss/geojson.scss
new file mode 100644
index 0000000..292889e
--- /dev/null
+++ b/src/scss/geojson.scss
@@ -0,0 +1,35 @@
+.pinpoint-geojson {
+ stroke: #777;
+ stroke-width: 3;
+ stroke-opacity: 1;
+ fill-opacity: 0;
+}
+
+.pinpoint-geojson.dashed {
+ @extend .pinpoint-geojson;
+ stroke-dasharray: 6 6;
+}
+
+.pinpoint-geojson.dashed-clockwise {
+ @extend .pinpoint-geojson.dashed;
+ animation: dash 100s linear infinite reverse;
+ -webkit-animation: dash 100s linear infinite reverse;
+}
+
+.pinpoint-geojson.dashed-anticlockwise {
+ @extend .pinpoint-geojson.dashed-clockwise;
+ animation: dash 100s linear infinite;
+ -webkit-animation: dash 100s linear infinite;
+}
+
+@-webkit-keyframes dash {
+ to {
+ stroke-dashoffset: 600;
+ }
+}
+
+@keyframes dash {
+ to {
+ stroke-dashoffset: 600;
+ }
+}
diff --git a/src/scss/main.scss b/src/scss/main.scss
new file mode 100644
index 0000000..a0e988b
--- /dev/null
+++ b/src/scss/main.scss
@@ -0,0 +1,103 @@
+/*
+ Pinpoint v1.0.0
+*/
+
+.pinpoint-hed, .pinpoint-dek, .map-outer, .pinpoint-source, .pinpoint-note {
+ font-family: 'Whitney Ssm', sans-serif;
+}
+
+.map-inner {
+ width: 100%;
+}
+.map-outer {
+ position: relative;
+}
+.map-cover {
+ position: absolute;
+ top: 0;
+}
+.map-outer.inactive .map-cover {
+ content: '';
+ width: 100%;
+ z-index: 10000000;
+ cursor: pointer;
+/* background: red;
+ opacity: 0.5; */
+ }
+.map-inner .leaflet-control-zoom {
+ -webkit-transition: opacity 0.5s;
+ transition: opacity 0.5s;
+}
+.map-outer.inactive .leaflet-control-zoom {
+ opacity: 0;
+}
+
+.pinpoint-hed, .pinpoint-dek {
+ margin: 0;
+ padding: 0;
+}
+
+.pinpoint-hed {
+ font-size: 16px;
+ padding-bottom: 5px;
+ margin: 0;
+ font-weight: 600;
+}
+
+.pinpoint-dek {
+ font-size: 16px;
+ margin: 0 0 10px 0;
+ padding: 0;
+ color: #666;
+ font-weight: 400;
+}
+
+.pinpoint-topline {
+ border-top: 1px solid #dadada;
+ padding-top: 7px;
+}
+
+.pinpoint-source, .pinpoint-note {
+ margin-top: 4px;
+ font-size: 12px;
+ color: #666;
+ a:link, a:visited {
+ text-decoration: none;
+ color: inherit;
+ }
+ a:hover {
+ text-decoration: underline;
+ }
+}
+
+.pinpoint-note {
+ margin-bottom: 0;
+}
+
+.leaflet-control-scale-line {
+ border: 0 !important;
+ background: none !important;
+ padding: 2px 0 !important;
+ font-weight: bold;
+ color: black;
+ text-shadow: 0 0 5px white;
+}
+.leaflet-control-scale-line:first-child {
+ border-bottom: 5px solid black !important;
+}
+.leaflet-control-scale-line:last-child {
+ border-top: 5px solid black !important;
+ margin-top: 4px !important;
+}
+.leaflet-control-minimap {
+ box-shadow: 0 0 8px rgba(0,0,0,0.5);
+ pointer-events: none;
+}
+.leaflet-control-minimap .leaflet-zoom-hide > g:first-child:after {
+ content: 'xxxx';
+ display: block;
+}
+
+@import 'markers';
+@import 'overlay';
+@import 'geojson';
diff --git a/src/scss/marker-label-callout.scss b/src/scss/marker-label-callout.scss
new file mode 100644
index 0000000..843aa44
--- /dev/null
+++ b/src/scss/marker-label-callout.scss
@@ -0,0 +1,45 @@
+
+
+
+
+.marker-label-callout {
+ margin-top: -50px !important;
+ margin-left: -50% !important;
+ .marker-inner {
+ @include marker-inner;
+ font-family: 'Whitney Ssm', sans-serif;
+ background: black;
+ color: white;
+ font-weight: 500;
+ font-size: 14px;
+ padding: 6px;
+ margin-top: -6px;
+ &:after {
+ content: "";
+ top: 100%;
+ left: 50%;
+ height: 22px;
+ width: 2px;
+ background: black;
+ position: absolute;
+ pointer-events: none;
+ margin-left: -1px;
+ }
+ }
+}
+
+.marker-label-callout.north {
+ // default
+}
+
+.marker-label-callout.south {
+ .marker-inner {
+ margin-top: 72px;
+ &:after {
+ top: 0;
+ border-color: rgba(0, 0, 0, 0);
+ border-bottom-color: #000000;
+ margin-top: -20px;
+ }
+ }
+}
diff --git a/src/scss/marker-label-plain.scss b/src/scss/marker-label-plain.scss
new file mode 100644
index 0000000..7013a18
--- /dev/null
+++ b/src/scss/marker-label-plain.scss
@@ -0,0 +1,70 @@
+
+.marker-label-plain {
+ margin-top: -28px !important;
+ margin-left: 100% !important;
+ .marker-inner {
+ @include marker-inner;
+ font-family: 'Whitney Ssm', sans-serif;
+ color: black;
+ font-weight: 600;
+ font-size: 14px;
+ }
+}
+
+.marker-label-plain.north {
+ // same as default
+}
+
+.marker-label-plain.northeast {
+ margin-top: -25px !important;
+ .marker-inner {
+ margin-left: 10px !important;
+ }
+}
+
+.marker-label-plain.east {
+ margin-top: -10px !important;
+ .marker-inner {
+ margin-left: 10px !important;
+ }
+}
+
+.marker-label-plain.southeast {
+ margin-top: 8px !important;
+ .marker-inner {
+ margin-left: 10px !important;
+ }
+}
+
+
+.marker-label-plain.south {
+ margin-top: 5px !important;
+}
+
+.marker-label-plain.southwest {
+ margin-top: 8px !important;
+ .marker-inner {
+ margin-right: 25px !important;
+ position: absolute;
+ right: 0;
+ }
+}
+
+.marker-label-plain.west {
+ margin-top: -10px !important;
+ .marker-inner {
+ margin-right: 25px !important;
+ position: absolute;
+ right: 0;
+ }
+}
+
+.marker-label-plain.northwest {
+ margin-top: -25px !important;
+ .marker-inner {
+ margin-right: 25px !important;
+ position: absolute;
+ right: 0;
+ }
+}
+
diff --git a/src/scss/markers.scss b/src/scss/markers.scss
new file mode 100644
index 0000000..e5a4bd8
--- /dev/null
+++ b/src/scss/markers.scss
@@ -0,0 +1,34 @@
+
+/* markers */
+.marker-circle {
+ stroke: none;
+ fill: black;
+ fill-opacity: 1;
+}
+.marker-icon{
+ width: 20px;
+ height: 20px;
+ background: black;
+ margin-left: 10px;
+}
+.marker-icon-square {
+ // default
+}
+.marker-icon-circle {
+ border-radius: 1000px;
+}
+.marker-icon-none {
+ opacity: 0;
+}
+
+@mixin marker-inner {
+ display: inline-block;
+ white-space: nowrap;
+ height: auto !important;
+ position: relative;
+ line-height: initial;
+}
+
+@import 'marker-label-plain';
+@import 'marker-label-callout';
+
diff --git a/src/scss/overlay.scss b/src/scss/overlay.scss
new file mode 100644
index 0000000..3b2082d
--- /dev/null
+++ b/src/scss/overlay.scss
@@ -0,0 +1,49 @@
+
+/* overlay icon */
+.image-interactive-icon {
+ opacity: 0;
+ -webkit-transition: opacity 0.5s;
+ transition: opacity 0.5s;
+ cursor: pointer;
+ display: none;
+}
+
+.map-outer.inactive .image-interactive-icon {
+ display: block;
+ top: 10px;
+ left: 10px;
+ position: absolute;
+ border-radius: 4px;
+ background-size: 50px 50px;
+ background-color: white;
+ z-index: 999;
+ opacity: 1;
+ font-size: 10px;
+ font-weight: 600;
+ padding: 8px 10px;
+ box-shadow: 0 0 3px #777;
+ > svg {
+ vertical-align: middle;
+ display: inline-block;
+ margin-right: 8px;
+ }
+ .image-interactive-icon-text {
+ vertical-align: middle;
+ }
+ &.image-interactive-icon-hover {
+ display: none;
+ background-color: #007ec5;
+ color: white;
+ }
+
+}
+
+
+.map-outer.inactive:hover {
+ .image-interactive-icon {
+ display: none;
+ &.image-interactive-icon-hover {
+ display: block;
+ }
+ }
+}
\ No newline at end of file