2

I am building a series of HTML web maps for a client (5000 location maps all HTML). I have a python script to execute a basic set of HTML tags to build a specific web page (Call this page 1). The script is simple, upon running it will return my web page. Now, I am trying to do a bulk string find/replace to modify the HTML elements (Different characteristics for each map) I want python to search for a specific string in my code, then look up data from a spreadsheet to insert the HTML elements into it. But not sure how to go about this, I have a working python script that populates an HTML file. Next step is the look up and find/replace, do I use JavaScript or python for this and how do I go about it?

import os, sys
import webbrowser

f = open('XXX.html', 'w')
message = """<!DOCTYPE html>
<html>
<head>
    <title> Web Map Viewer</title> <button onclick="printMe()" style="float:right"><b>Print Maps</b></button>
    <meta charset="utf-8" />
    <script type='text/JavaScript'></script>
    <script src="jquery-3.3.1.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <h2>Location Web Viewer Map </h2>
    <fieldset >
        <legend><b>XXX Location Snapshot:</b></legend>
            Status: Existing | Latitude: 42.557, Longitude: -94.680, Elevation: 7348 ft. | Address: 500 State Highway 156 | Contact Phone: 123-345-3333
    </fieldset>
    <!--CSS In-line Styles-->
    <style>
        body {background-color: lightgray;}
        h2   {Color: black;}
    </style>
    <script>
    //Begin Map construction, create 2 maps!
    var map, map2;

    //Initiate the mapOnload function for Bing Maps API
        function printMe() {
            window.print();
            }
        function GetMap() {
            //First map for the DOM (Upper Map)
            map = new Microsoft.Maps.Map('#myMap', {
                //Zoom to location in map
                center: new Microsoft.Maps.Location (43.557172, -92.680291),
                mapTypeId: Microsoft.Maps.MapTypeId.aerial,
                zoom: 14});

            //Second map for the DOM (Lower Map)
            map2 = new Microsoft.Maps.Map('#myMap2', {
                //Zoom to location in map
                center: new Microsoft.Maps.Location (43.557172, -92.680291),
                mapTypeId: Microsoft.Maps.MapTypeId.road,
                zoom: 8});

        //Set the location for both maps
        var center = map.getCenter(map.getCenter(43.557012, -92.680466));

        //Create custom Pushpin

            var pin = new Microsoft.Maps.Pushpin(center, {
                title: 'Location A',
                text: 'XXX '

            });

                //Add the pushpin to the map
                map.entities.push(pin);
                map2.entities.push(pin);
        }
    </script>
    <script type='text/JavaScript' src=mykey  async defer></script>
    </head>
    <body>
        <h4><b>Map 1 - Substation and Nearest Vicinity:</h4></b>
        <div id="myMap" style="position:relative;width:95%;height:380px;"></div>
        <h4>Map 2 - Regional Surrounding Area / Closest Major City: </h4>
        <div id="myMap2" style="position:relative;width:95%;height:380px;"></div>
        <br>
    </body>
</html>"""
f.write(message)
f.close()
webbrowser.open_new_tab('XXX.html')
  • I'm having trouble deciphering a more general goal that you have but it seems like you have a lookup that you want to refer to and, from that dataset, you want to put pins on a map. The best way to do this would be to just use javascript to both read the data, parse it, and plot it on the map. One can't really "inject" Python inside of JavaScript. – kuanb Aug 9 '18 at 17:46
  • I think you would get more qualified answers to this question on Stack Overflow. – Stefan Aug 9 '18 at 18:52
  • 2
    You might be overcomplicating things, but I am not sure how the workflow is for you. You could use Python's string format abilities to write stuff into placeholders right away and output a bunch of HTML files, instead of writing one and then doing find/replace operations. For example something like """...html stuff here...<script>Microsoft.Maps.Location ({}, {})</script>""".format(43, -9) -- here the curly brackets {} are getting replaced with 43 and -9 – chrki Aug 9 '18 at 19:10
  • How would I craft my code to do this with only JavaScript? My python script works for building one map. The python is the overall container and inside is the code for javascript to build it. I need a good example of how to search for a specific topic (text string) , find it and replace with that data in my spreadsheet. Simple find/replace (python2.7) or JavaScript I suppose. – Robert C Aug 9 '18 at 19:12
  • Your likely correct, but every time I ask a question on here everyone wants all the details. Long story short I need python code (2.7) a sample block that I could modify to search in my code for a string, then look up table for the updated info then replace the old with the new. I apologize for not explaining it better. – Robert C Aug 9 '18 at 19:15
3
+50

The .format() is well supported in Python 2.7 and later, and can be used to do a simple replacement for a template. For example: print('hi {v}'.format(v='there')) shows "hi there".

You need two things: a string with the template, and a dictionary with the values to replace. The dict is passed to format like .format(**params) to turn the key into parameter names. The keys can replace zero more occurrences in the message, for instance if {lat} appears several times.

template = '''\
<!DOCTYPE html>
<html>
...
    Blah bla {name} blah...
    center: new Microsoft.Maps.Location ({lat}, {lon}),
...
    center: new Microsoft.Maps.Location ({lat}, {lon}),
</html>
'''

params = {
    'name': 'Somewhereville',
    'lat': 43.557172,
    'lon': -92.680291,
    # and others ...
}

message = template.format(**params)

with open('XXX.html', 'w') as fp:
    fp.write(message)

In this example, only the values in params and the filename would need to be changed. template stays the same, but gets updated with the values in message.


Similar abilities are available for Javascript, e.g. see template literals.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.