PRO-Plugin: API Zippopotamus

The API http://zippopotam.us/ gives Citynames and Coorindates to a Zipcode. The JCI-PRO-Plugin can use that for a “Zipcode to City-Search”:


Examples: Houston, US, TX | Munich, DE, Germany
This done this way:

1 .JCI-Template:

[jsoncontentimporterpro id=ID_OF_TEMPLATE httpstatuscodemustbe200=no]

2. twig-template:

  • url:
    http://api.zippopotam.us/{% if urlparam.co %}{{urlparam.co}}{% else %}US{% endif %}/{% if urlparam.zip %}{{urlparam.zip}}{% else %}80636{% endif %}
  • urlparam4twig: zip#co
  • twig-code (“/zippopotamus/” is the URL to the WordPress-Page with the Shortcode):
    {% if urlparam.co %}{% set coun = urlparam.co %}{% else %}{% set coun = "US" %}{% endif %}
    <form action=/zippopotamus/>
    <select name="co" id=jciinput>
    <option value="DE" {% if coun =="DE" %}selected{% endif %}>Germany</option>
    <option value="US" {% if coun =="US" %}selected{% endif %}>United States</option>
    </select>
    <input type=text name=zip placeholder="Insert Zipcode" value="{% if urlparam.zip %}{{urlparam.zip}}{% else %}80636{% endif %}">
    <input type=submit id=jciinput value="Search Zipcode for City">
    </form>
    <hr>
    {% if places %}
    <strong>Found:</strong><br>
    <ol>{% for p in places %}<li>
    <a href="https://www.google.com/maps/search/{{p.latitude}},{{p.longitude}}" target="_blank">{{ attribute(p, 'place name') }} ({{ attribute(p, 'state abbreviation') }})</a>
    </li>{% endfor %}</ol>
    {% else %}
    no City to this Zipcode {{urlparam.zip}} found
    {% endif %}
    <style>
    #jciinput {
        border-radius: 5px;
        width: 320px;
        height:35px;
        background: #eee;
     color: black;
    }
    </style>
    <hr>
    Examples: <a href="/zippopotamus/?co=US&zip=77004">Houston, US, TX</a> | 
    <a href="/zippopotamus/?co=DES&zip=80636">Munich, DE, Germany</a>