eddiesigner / sketch-map-generator

Sketch plugin to fill a shape with a map generated from a given location using Google Maps and Mapbox

🗺 Sketch Map Generator 4

Map Generator better than ever! ✨

Design beautiful map interfaces, mobile applications and more in less time with Map Generator. Now powered by Google and Mapbox.

If you find this plugin useful, please consider to make a donation to support its development! 🙏🏼

Preview

Important

You will need to provide your own Google Maps API Key or your own Mapbox tokens so that the plugin can work properly.

To know how to generate your Google API Key and your Mapbox tokens please follow the steps described in these guides:

• How to generate a Google Maps API Key

• How to get your Mapbox tokens

If you already use this plugin please backup your Google API Key, Mapbox tokens and map settings. The plugin will try to use the data you have saved but if something unexpected happens, it is better to have that data at hand.

Features

• 🗺 Generate maps with Google Maps
• 🗺 Generate maps with Mapbox
• 🎨 If you use Mapbox, now you can use your own custom styles!
• 🔥 Map preview! Now you can see a live preview before generating a map
• 📍 You can move the map preview, drag a pin to pick a location and change the zoom with no effort
• 💅🏻 Snazzy styles support
• ✨ A beautiful whole new UI
• 🌓 Dark mode support
• 🤙🏻 An improved user experience
• 🛠 Several improvements and bugfixes

How it works?

1. Save your Google API Key or your Mapbox tokens in the plugin settings.

2. Create a shape and select it.

3. Set your map settings:

Google Maps

Plugins > Sketch Map Generator > Generate a map using Google Maps... or press ^ + Cmd + G

Mapbox

Plugins > Sketch Map Generator > Generate a map using Mapbox... or press ^ + Cmd + B

4. Press the button to generate the map and voila! Your shape will be filled with a beautiful map.

You can also generate with a single command the last map you created:

Plugins > Sketch Map Generator > Generate previous map or press ^ + Cmd + P

Installation

Manual

1. Download the latest release of the plugin and unzip the file

2. Double click on Map Generator.sketchplugin and you're ready to go

Install with Sketch Runner

Open Sketch Runner and run the Install command, then search for Map Generator and hit the Get button.

FAQ

What versions of Sketch are supported?

The plugin is compatible with Sketch 53+

Does this plugin need an API Key or API token?

Yes. You need to provide an API Key for Google Maps and you also need to provide a public and a secret token for Mapbox.

Do I have to pay to use this plugin?

No. Although a credit card is required to get a Google Maps API key. Don't worry, it will be almost impossible for you to have to pay a single penny.

Does this plugin support retina? Yes.

There are some size limitations?

Yes. Currently Google Maps images can be returned in any size up to 640 x 640 px. Currently Mapbox images can be returned in any size up to 1280 x 1280 px.

Issues

If you have any questions or troubles with this product, please feel free to open an issue here.

Credits

Thanks to Guillermo for the icon!

sketch-map-generator's Issues

Map pins not showing up after generating image

While I am previewing my map I can see the map pins but when I generate the image they disappear. Why is that?
Also, is there a way to customize the pins to use logos, etc.?
I would also like a way to use multiple pins in the same map, like a company showing how many states or cities they are located in.

does not work with sketch 49.3

Hi,
I tried this :
brew install ffmpeg
brew link ffmpeg
gifme shows in plugins but after select gif file nothing happens.

Map text and iconography is too big

The text size is much larger than a real Google map. It is as though the image is zoomed in 200%.
I have tried running Sketch and the plugin on a retina and non-retina screen, and it is the same.

Store data within the layer

Hi,

When generating a map it would be great if the address and zoom level could be store and reused automatically using maybe the layer name.

Currently I do it manually but it would be great if it can be automatic.

Thanks!

Can't generate map & preview it

Hi, my colleague introduced me to this awesome plugin.
But unfortunately I can't generate and can't see the preview modus.
I use Sketch version 60.1

Thanks in advance for your help :)

Street names too big

Hi,

First of all, congratulations for this great plugin.

I've noticed that now the streets and neighborhoods labels are much bigger than usual. Not sure if since the last Sketch or plugin update.

Best
J

Not working

It stopped working for me, I think it was after a Sketch update.

Watermarks

Is it perhaps possible to remove Google watermarks?

Mapbox doesnt' work in Sketch 52.3

Hi there. I keep getting a message "There was a problem, please check the address settings." But Google maps works fine.

feature proposal: re-create previous map

Hi
Thanks for this plugin, I adore it.
I hope you can create a shortcut to re-create a map with the same options as the last map generated.

[Feature Request] Please Provide Official Support for Sketchpacks Instal & Auto-Update

Please provide official support for Sketchpacks - this is a project that deserves it. It allows the Sketch plugin developer to keep all their users automatically updated, with no work from their part - updates are delivered automatically from your GitHub repo, when you push to your 'master' branch.

Please have a look their integrations page, so we can get not just automatic version numbering, but also auto-updating!

[Docs] Please Add Instructions on How to Install via Sketch Plugin Manager

The Sketch Plugin Manager is an amazing project, combining the best of all plugin managers that came before it:

• it is a normal Sketch plugin, that works inside Sketch's own 'Plugins' menu - i.e., it is not a separate app, and does not instal obtrusive menu items in your menubar.
• it provides a beautiful, searchable, easy-to-use interface for users to find the plugins they need.
• it automatically instals plugins listed in Sketch's official plugin directory, straight from the plugin's GitHub repo, requiring no configuration or special setup at all from the developer.
• it automatically advises users when a plugin needs updating, and updates them automatically with a single click.
• it provides the user with an easy-to-find, clickable link to your plugin homepage/GitHub repo.
• it can uninstall plugins with a single click, too.

The instructions that your users would need in order to instal Sketch Map Generator via Sketch Plugin Manager are:

Installation via [Sketch Plugin Manager](https://mludowise.github.io/Sketch-Plugin-Manager/):

1. In the 'Catalog' tab of the Sketch Plugin Manager window, click in the 'Search' field and type 'Map Generator', to filter the list.
2. You will see the 'Sketch Map Generator' plugin listed at the top of the list. Click the 'Instal' button inside it.

Adding these instructions would greatly help popularise and support the project.

MapBox has some issue

Hi Mate.
When i try with mapbox its saying "There were an issue, please check the address settings" can u please help me out with this

Is it possible to produce maps bigger in size?

I am designing a map-centric interface and your plugin has served me greatly in this. One thing I am missing, though, is that it has a strong limitation on the size of the tile it can produce. I design on a canvas of 1440x900, would it be possible to produce a continuous image that has that size?

Right now I am working around the limitation producing different tiles and overlapping them, but it's a bit of a petty workflow and I am wondering if it can actually be automised.

Thanks!

Check the address settings

When I try generating a map using the Mapbox option,
it pops up an error message that reads "There was a problem, please check the address settings".

That of Google Maps works just fine.
I only happen to prefer the Mapbox.

I'll appreciate if there's a way around this.

Add support for sketch-data-populator and dynamic maps

Adding a command that looks for the location data from the layer's metadata (instead of a dialog) would enable dynamically generating maps from real data.

dataliterate/data-populator#128

[Feature Request] Add Optional Map Marker

Every time I've used Map Generator I've had to manually add a map marker symbol on top of the map. While there may be a case where a marker is not needed, chances are in most instances having at least one marker placed already would be welcome.

The ideal solution would be, if the marker were optional, and could be placed as a symbol, on top of the map - at its centre (address location). That way, it could be easily customised or replaced after placing.

Could you please at least change my original project structure or file name?

When I released feature 'dynamic map', I specially reminded you, then that's the second time plagiarism without any mention.

Your commit on 20 Aug 2017 copied my commit on 11 Aug 2017

Same project structure and some same code, just change method or parameter name.

e.g.

---

Now it happened again. This time you remove my control-index-design, but not change file name, and I can still find the similar code.

---

---

As we all know, we are in an open source community, you can copy and use any code in MIT, but just copy and change method or parameter name, and then make it as your own product, that would make author uncomfortable, and is not a good practice.

Support Sketch 45 plugin update system

Hi there!

This is a quick note to remind you that Sketch 45 will include a plugin update system.

It would be awesome if you could add support to it (it's really easy!) before Sketch 45 comes out. Ideally, you should release an update for your plugin while we're still in Sketch 44, so your users will have a nice & easy experience when 45 is released.

For more details, please check http://sketchplugins.com/d/229-updating-plugins and http://developer.sketchapp.com/introduction/updating-plugins/

Thanks in advance!

After connecting Mapbox account, custom styles are not displayed

I input my token and username, however the styles that are displayed when I try to generate a map are not my personal styles, I am not sure if I am doing something wrong or it doesn't work?

Apple maps support

It would be great if sketch-map-generator could support Apple maps.

Cannot Preview Map in Sketch 59.1

The preview area is blank even Google Maps API Key is saved.
Generate function is OK.

Feature request: Remember address and zoom setting

It would be fantastic, if the plugin would remember the previously entered address and zoom-level. The snazzy maps style option is great, but entering all information when trying out styles is becoming very time-consuming.

Great plugin!

Reply to eddiesigner for map plugin

You started this project earlier than me, I admit you are the first one. But you said 'The structure of my code is like that since long time ago', it's not true definitely.

Actually you project just has one code file 'script.cocoascript' until your commit on 20 Aug 2017. After your reconstruction, new project got to be the same structure, same file name, same index-control-design with mine. You said your google map code file should be named 'google.js' definitely
, but not all the utility code file should be named 'common.js', actually engineers usually name it 'utils.js' or 'tools.js'. I can find several 'coincidence' in your commit. So you see, there are so many choices, you always select the most similar one. If you still insist that's coincidence, I can just said 'hehe'.

I think your new feature is based on the post you mentioned, but your commit on 20 Aug 2017, I still think it's not just by yourself. But you are right, I should stop arguing about that, it's meaningless, after all, open source is the community, the code is only a small part.

BTW, if you think your are right, why set the last issue to limited conversation, others would judge it by their common sense if I talked nonsense.

Anyway, best wish to you.

Dynamic or half-decimal zoom levels

Would it be possible to allow zoom level to be input at a zoom level of choice also when it comes to the first two decimals or at least to have half-decimal zoom levels (e.g.: 1.5,2.5,etc)?

Mapbox doesn’t seem to work any more.

Sorry, but can’t provide any other information. Google works as expected. Choosing Mapbox doesn’t show any result.

Styles not rendering correctly

I have a problem where pasted styles from Snazzy Maps are not rendering correctly. Not sure if I'm doing it right but objects and styles are definitely not displaying right.

Snazzy Maps style 1: https://screencast.com/t/PKQluCjLv
Plugin generated map 1: https://screencast.com/t/yHG9zcNMfb8

Vid: https://screencast.com/t/yoJZjdVF

Option to align/offset map

Hi,
Would it be possible to introduce an align/offset option wherein I could could specify by how much the location I search for should be offset from the centre?
I'm overlaying text on the map layer; the generated map is centred & inserted as image fill on the map layer; I'd like to show the Text on the left while offsetting the map to the right.

Disabled Address Input

When I open the plugin via shortcut or plugins tab - I am not able to click into any of the text input fields. I am running a beta OS and the latest version of sketch so this might be the cause, but I wanted to open an issue so that you were aware.

Sketch Version: 55.2
Mac OS: Catalina: 10.15 Beta (19A501i)
Map Generator: 3.1.0

I tried to capture logs from console.app but I was not able to run the plugin so not sure if that would be helpful for your debugging. Let me know if you think the logs are still helpful for you to debug this issue and I will try to add them in the comments.

Sketch 52 Incompatibility

After updating to Sketch 52, uses google or mapbox yields the error "Shape layer only: Your selection was a “Rectangle”, that is not a shape layer. Please select a shape layer." This error occurs even when I have a basic rectangle selected. I'm guessing they changed something in how layers are identified that interferes with the layer validation that this plugin uses.

Would really appreciate having this fixed. My team and I love this plugin!

Plugin doesn't work

Hey guys,

I'm having a small issue with your plugin. My steps are the same from your tips:

Create a shape and select it.
Run the Map Generator Plugin:

Google Maps

Plugins > Map Generator > Generate a Map using Google Maps

And what I'm getting after these steps is blank shape—without map.

What's wrong? I've re-installed Sketch, Plugin and update everything.

Feature Request: Ability to save Snazzy Maps Styles for Easy Reuse

I am working on an project in which map views are a core part of the app. It's quite cumbersome to re-copy and paste the same style over and over again.

It would be amazing if there was a way to save a Snazzy Map style as a preset so I can easily create multiple maps and pick the style lightning fast.

Shape Layer Must Be Vertical

Very helpful plugin, thank you! For certain aspect ratios of shape layers however, the plugin seems to generate the following error: "There was a problem. Please check the address settings." The fix appears to be to use a different size of shape layer, and then rescale the shape after the map has been generated.

Suggestion: integrate with Snazzy maps

First of all thanks for this plugin, works awesome and it saves a lot of screenshooting!

This is just a suggestion, how about integrate this with snazzy maps themes (https://snazzymaps.com/) to allow style customisation of map?

For what I can see you're getting a static image from google maps API. From the documentation you can pass a style object to the url for styling. You can get that object from snazzy maps api. 💥

Probably isn't so linear as I think, but is a starting point.
This would be great to get maps with the look & feel of your app, taking of labels and other designer stuff...

Once again, many thanks! Keep shipping!

style cannot be applied

i am running sketch 41.2, and whenever i run the plugin it says style cannot be applied??
any thoughts?

[Feature Request] Implement Map Generator as a Custom Data Source for Sketch 52+

From version 52 onwards, Sketch now supports custom Data sources, which allow us to populate a layer with text and image from pre-defined sources. It would be great if the Map Generator plugin was provided as a custom Data source.

Gmap screenshot too big

Google Map Screenshots are generated too big. Strangely it's always exactly 3% extra height.

EDIT:
It's actually pretty random, but in a squarish format.

Support for Apple Maps

It would be great if this plugin can handle maps.
This could be great when designing iOS apps

Continuously getting errors with Mapbox

Getting error message 'there was a problem, please check the address settings' when trying to use Mapbox. Google Maps works fine. Have tried different map settings and addresses and nothing seems to work.

Support for Bing Map

Hey, Loved your plugin... i use it very offen. can you please add support to generate Bing Maps also.

ios Catalina

Hi there,

I just downloaded your plugin but looks like its not working on this operation system. Looks like it is not pulling the location when I want to generate the map.

Thanks,
Aleks

Preview works, but shape stays empty

Hi –

Plugin interface works perfect with preview, but hitting Generate has no effect, the selected shape remains empty (but the layer name is updated to the address)

Followed steps to copy entries in Console.app
Text file attached
console.txt

Sketch v58
Map Generator 3.5.4
OS X 10.15.2

Mapbox generator not working with Sketch 52.2

Nothing happens when I try to generate a map using Mapbox (Google Maps works fine).

Any change to add another base layers maps?

Maybe CartoDB Maps, Mapbox, Nokia, TomTom?

Mapbox maps not working - Sketch 46.2

I just found this great plugin today, and Google Maps is working fine.

When I tryto use Mapbox I just get an error message:

There was a poblem, please check the adress settings.

I´ve been trying to enter exactly the adress used in the readme "Jagerstraße 16 Linz".

I installed the plugin via Sketchpacks.

Retina support

First off love the plugin! Incredibly useful.

One thing that would be great though is retina support. When designing @2x there's no way to stop the maps looking blurry, so I have to resort to screenshoting Google Maps on my retina display.

when i prssed the hot keys and It said the style can not be applied , what should i do?

Originally posted by @ShorryJK in #23 (comment)

Plugin does not work sketch 50.2 plugin 3.0

Hi,
The plugin does nothing when trying to use it.
Nothing is written on console.
Sketch 50.2
Plugin 3.0

Error: The style can not be applied

Using the latest beta (47).

Problem generating Mapbox map greater than 1280 pixels wide

There might also be a height limit