Create Performant, Stylable Map UI Components Using MapSVG

Do you know how you can use maps on the web as first-class UI components that you can easily style with CSS without the weight of embeds? That's precisely what you learn in this video: How to use MapSVG WordPress plugin to create customizable, performant maps. This video is sponsored by MapSVG. MapSVG is the best map plugin for WordPress with infinite possibilities, and it truly does have infinite possibilities, as you'll clearly see in this guide. It allows you to create all kinds of maps in one single plugin. You can turn any vector file into an interactive map, you can turn Google Maps widget into an interactive SVG map, which is much better for performance, of course, and you can turn any image, be it JPEG or PNG, into an interactive map. In this guide, we will focus on Google Maps, but it works pretty much the same with vector maps and image maps as well, so you'll be good to go with either format after watching this guide. MapSVG is a plugin that not only generates maps, but it also integrates those maps directly into a database. This gives you a ton of power because it allows you to connect various other services directly into the data that you get from the map. And of course, you can use this in WordPress as a first-class citizen on custom posts, objects, and more. You're going to have to check the rest of the features yourself because there are too many to go into them. The most important features for you as a developer are, of course, templates, JavaScript event handlers, and CSS editor. It gives you a ton of flexibility and a ton of power. Without further ado, let's jump straight into the code. I will open WordPress admin here. On this demo site, I already have the MapSVG plugin installed. You can install it as you would install any other plugin. I'm not going to go through the process because it's straightforward. So, let's open the plugin view. In this guide, I will show you how to set up Google Maps with MapSVG. And for that, you will need a Google Maps API key and a Google Geocoding API key. It's fairly simple to set those up. And of course, MapSVG comes with beautiful docs that will show you step by step how to create your own API keys for both. You're going to find them in documentation, under Guides -\> Start Screen -\> How to get Google API key. The reason why you need two API keys, first one is to actually show the Google Map, and the second one is for the Geocoding API, which allows you to convert addresses into latitude/longitude coordinates, meaning that you'll be able to search by address for a specific thing on the map. In any case, to get your API keys, follow the step-by-step guide here, and you'll be good to go. I already have my API keys set up. They're right here. As you noticed, my API keys are blurred out. I don't want to share them with you. You can create your own completely for free, as I've shown you, just check out the docs. Okay, let's create our first Google Map. I will open the first dropdown here, and I will search for “USA,” and I'm going to use “USA Full SVG” map, and once I hit that, a new USA full map should appear, and here's the shortcode that I can use to add it to my WordPress frontend. It really is as simple as that. I'm just going to copy the shortcode to the clipboard, and I'm going to add it to a new post. We're going to add shortcode block here, paste this in, and let's set the page title to MapSVG. I’m going to publish that and open it in a new window. There we go. This is our first SVG map, already live on the page. And as you clearly see, it's interactive. and not only interactive, but it's actually performant because this is not an iframe that's coming from Google Maps API or embed code, which is massive and very poor for performance. This is an actual SVG element that is interactive. When you inspect the code, you're going to see that this SVG is embedded directly into the page. There's no iframe here, there's no additional documents. It is straight up in the page as a first-class citizen — one of the main reasons why you should be using MapSVG, because as a developer who cares about performance, you don't want to use Google Maps embed, you want to use something that is actually performant. And that's where MapSVG comes in. It's not only performant, it's also customizable, as we'll see right now. Let's jump back into the admin area and let's configure and customize this map. I will open MapSVG, and I will click on the USA. This is the editor that you can use to customize anything that you can imagine about this map. As you've seen, we already have the map on the page, but we actually want to play around with it, customize it, make it a little bit nicer, and add some data to it that is specific to our use case. We will do this next. The settings screen here allows you to tweak a number of default options, such as map, width, and height. It's responsive by default, which means it will take the full width and height of the container where you place it — we want that. And then you can tweak the aspect ratio. For example, let's set it to 16:9 here. Of course, you can use this field to find a specific address

but for the sake of this demo, let's just use the interactive page and set the position right here to our default initial position. Once I do that, the map will load with this position focused. I will save the map, and I will reopen my page. There it is. My map is focused exactly on the area where I want it. There are a number of other options that you can tweak here. You can add sidebars, headers — header allows you to search by category and address. Then you can enable Disable Zoom Buttons, User Location, Zoom Reset Button, and of course, there are many, many, many more options here. It is truly customizable with infinite possibilities. As I'm not really thrilled about this black and white map, let's tweak the colors here. The map background can stay as is, this gray, but I will tweak the regions. And for example, let's set them to something much nicer. Perhaps this purple. And now I want to set region borders. Let's also use purple as a base, but we will make it much closer to white so it's nice and accessible. You can, of course, customize the hover state, but I kind of like this default behavior, so I'm going to leave it as is. And also, you can adjust selected regions because you can click on those regions. And we're going to get into this view in a bit. Don't worry about it right now. So, there are a ton of options that you can customize here. Check them out yourself. You can customize anything you want about this map and make it precisely aligned with the style of your brand, of your website, of your product. I'm going to hit save again, Command+S, and of course, the map is going to be updated exactly as we configured it. And now we are getting to the most important part of this product, the Regions. Regions are very simple to explain. They are interactive areas on the map. In this case, in our example, those are correlated to the states of the USA, but essentially, you can create any kind of region for your map. So, if you're using a custom SVG that is not related to geography, for example, you can create your own specific regions that are tailored to your needs. Let's open California here and let's tweak it. You can, of course, set the title. We're going to leave it as California. Then, you can add some kind of description to that. Let's just say “Map demo”. You can tweak the status here, so you can disable regions that you don't want to be interactive. And then you can add images here — let's set this existing one, just for an example. And for the link, we're going to set it to https://css-weekly. com, just so we have something to work with. All right, I'm going to hit okay. Of course, the fields that you've seen here are completely customizable as well, and you can edit them right here. I'm going to click it. And now you see all fields that we've seen on our map. So you can change this, add new fields, remove existing ones, and you can customize the map and the fields of a map precisely to your needs. If we click California here, we're going to see some information about that. This is also what is visible on the front page, which is not what we want. We actually want to tweak this template, and this is really easy to do. We're going to go into the Template editor. By default, Region Popover is selected here, but we actually want to create Region Details View, as clearly stated here. So, we're going to select that: Region Details View, and we are going to tweak the template. I'll remove this info text. Now that we've removed this, we're not going to see this information text here. We don't really want it here. And as you see here, it says that this is going to iterate all linked database objects. And we are going to look into this next, but before we do, let's just move this images section outside of the linked database objects because I want to show them right here underneath our “Status: enabled”. I'm going to save this, refresh the map, and if I open California, I can see that the map is enabled, and I clearly see the image that I've uploaded to this map. This image makes absolutely no sense for this particular use case, but it shows you that it really is easy to work with map SVG to customize the detailed view of a map region. Let's jump back into the admin and let's set up our database. Database allows you to show something on a map as a marker. Markers can, of course, be connected to regions. This is, of course, a little bit abstract when I'm talking about it, so I'm going to show you how this works. Let's add an object here. Let's call it DB object. Description is going to be “This is my database input. ” We can enter a location here, and we are going to enter “California, USA”. We can, of course, tweak the location field — it's right here. As you can see, we can tweak this, and we can change the style. Let's use this orange one. And the region that we will connect this

to is going to be, of course, California. The category is going to be… well, we have default categories “first”, “second”, and “third”, but let's leave it at that. So, let's just hit okay and see what happens. All right. I'm going to save this. I'm going to jump back to frontend, and I have my first marker set up. And now if I click on California, I'm going to see my template that we've edited before, which features an image and then a database object. If you remember, we entered this as my database input, and we selected California, USA. So this is what we see here, exactly as defined in the template. And if I click on the marker, I'm going to get a different view, and this is going to be DB Object Details view. So again, just as I've shown you for the first view, we can tweak this template and adjust it exactly as you'd like. The databases and regions are very powerful and very simple to set up. Essentially, you create a region, you connect data to that region, and then you can display that data in a template. Really simple, but really powerful. One of the beautiful things that we can do with map SVG is, we can actually style the template according to our needs using CSS. Let's do that now. I'm going to close this, and I'm going to jump into the CSS Editor. So there's some basic styling here, but you can clearly see by the designation, by the classes, what are we dealing with here. Now, if you want to see exactly how to style this, of course, you can inspect the map directly in Developer Tools, but a better option is, of course, to view the template directly and even perhaps add some classes to it, so we can style this easier. Let's do that. I'm going to open the Templates again, and my Regions Detail View is already opened — so what I will do here is, I will wrap this into a div. I will add a class “intro”. I will indent this so it looks a little bit nicer, and I will jump back into my CSS editor and I will add another class “. intro” — I'll just use CSS nesting here, and I will reduce the size of an image because I think it's a little bit too big for our current view. Let's say something like 200 pixels. And block-size, which is equivalent to height, is going to be “auto”. And let's add “border-radius: 2rem”, and just for fun, let's add “corner-shape” as well: corner-shape is going to be “squircle” just so we have a little bit nicer border radius. If you don't know what the corner-shape property does, check out the link on the screen and in the description; it's really cool. Actually, I think that 200 pixels is a little bit too big, so I'm going to reduce this. I'm going to add “box-shadow: 0 10px” and let's just do straight up black, just so we have something to work with. I'm going to refresh my map, open it, and there we go, we have styled our image in our MapSVG view. So, essentially, you see how powerful this is. You can really straight-up tweak the template with HTML and CSS, use the data that you get from the SVG map, and customize it with CSS however you want. And this is all available natively in a page where you insert it. So it's not an embed, it's not an iframe, it's a straight-up SVG image that is styled with CSS, and it has an HTML template. That is how powerful MapSVG is. So, I hope that this shows you what all is possible using MapSVG. It's a really fantastic and a really powerful plugin that can handle all your map needs. You can create your own regions, you can upload your own images… So, hit the link in the description, try out MapSVG, and you can be certain that it will handle all your map needs with exceptional performance and a really flexible interface. Thank you so much for watching, and thanks so much to MapSVG for sponsoring. My name is Zoran Jambor. I will see and hear you in a different map, completely customized. Or rather, in the next video.