Egypt Map

[meenanader]

I have created the Egyptian map to be added into my project, which I thought it is helpful for others to use if needed.

[Indigo744]

Hello @meenanader ! Thanks for this PR. Do you have a working example by any chance? :)

[meenanader]

Hi,

Yes I have, but I cuoldn't find a place to put an example in the Repo. Is there one? Anyway, Below is the example I have used:

Controller:

GeoLocationsWidgetDemoController.$inject = ['$scope', 'config'];
  function GeoLocationsWidgetDemoController ($scope, config) {
    var state;
    $scope.mapData = {
      map:{
        name : 'egypt',
        defaultArea : {
          attrsHover : {
            fill : '#242424',
            animDuration : 100
          },
          tooltip: {
            content: function(){
              return '<strong>' + state + '</strong>';
            }
          },
          eventHandlers: {
            mouseover: function(e, id){
              state = id;
            }
          }
        },
        defaultPlot:{
          size: 17,
          attrs : {
            fill : config.settings.colors['brand-warning'],
            stroke : '#fff',
            'stroke-width' : 0,
            'stroke-linejoin' : 'round'
          },
          attrsHover : {
            'stroke-width' : 1,
            animDuration : 100
          }
        },
        zoom : {
          enabled : true,
          step : 0.75,
          mousewheel: false
        }
      },
plots:{
        'EG-PTS' : {
          latitude: 29.951067,
          longitude: 32.518158,
          size: 10,
          tooltip: {content : 'EG-PTS'}
        }
      }
    };
  }

HTML:

<div class="mapael"
             data-ui-jq="mapael"
             data-ui-options="mapData">
          <div class="stats">
            <h5 class="text-white">GEO-LOCATIONS</h5>
          </div>
  </div>

[EDIT]: I took the liberty to add code tag in your comment :)

[Indigo744]

No, we don't have any example in this repo. I was more thinking about a JSFiddle.

[meenanader]

Here is one I just created:

https://jsfiddle.net/meenanader/byw00se8/

[Indigo744]

The quality is good! However, I notice that the map limits are way bigger than the map actual size. Did you trim your SVG to map limits before importing it to mapael?

Check the tutorial here: http://www.vincentbroute.fr/mapael/create-map.php

The areas in the new document may not fit with the document dimensions. In this case, go to File > Document Properties > Resize page to content, and click on the “Resize page to drawing or selection”.

[meenanader]

I was not able to do that in fact from the SVG (as I used one of the existing SVG online), tried to narrow the height and width, but that does not help, specially the top part. I may not gave enough time for that point, and properly need to look to it again as on my application it fits for purpose so I didn't think it would be an issue. I will give it a go one more time to see if all map can fit into the needed rectangle. Or if you have a shortcut I can use that would be helpful.

[Indigo744]

As said in tutorial, it is fairly easy using Inkscape:

go to File > Document Properties > Resize page to content, and click on the “Resize page to drawing or selection”.

Then, import again your SVG. Note: you will need to modify the getCoords() function to adapt to the new boundaries.

[Indigo744]

@meenanader, any update?