So, the confusing part for me was where do I put my html, css, and js files so that they can be served to my webpage?
I ended up making a folder in the file manager of my web host (Host Gator), which created a unique page of the webmap with the folder's name. Then I used that link with iframe to embed it on a specific page.
- Log into the control panel of your web host and go to File Manager.
- Create a parent folder (let's call it "test", for example) in the public html folder of your site.
- Organize the parent folder just the way you did on your local host (i.e. perhaps you stored code in other folders like 'script', 'css' or 'leaflet', etc.)
- Upload all your code files and put them in the proper place.
--This creates a new page on your site. Now, you can go to www.yoursite.com/test--
The way I got the map onto my specific page was by using an iframe plugin.
- For Wordpress, just search for the plugin called "iframe", download, and activate it.
- Then, use this shortcode in your page:
<iframe src="http://yoursite.com/test/" width="1300"(adjust for yourself) height="540"(adjust for yourself)> </iframe>
And you're good!
I tried Leaflet Maps Marker and Leaflet Map plugins, but those didn't match up to what I was looking for.