<p>Rendering a GPX trace icon isn't too difficult using gd2-ffij:</p>
<div class="highlight highlight-source-ruby"><pre>    <span class="pl-k">require</span> <span class="pl-s"><span class="pl-pds">'</span>gd2-ffij<span class="pl-pds">'</span></span>

[...]

    <span class="pl-k">def</span> <span class="pl-en">icon</span>(<span class="pl-smi">min_lat</span>, <span class="pl-smi">min_lon</span>, <span class="pl-smi">max_lat</span>, <span class="pl-smi">max_lon</span>)
      width <span class="pl-k">=</span> <span class="pl-c1">50</span>
      height <span class="pl-k">=</span> <span class="pl-c1">50</span>
      proj <span class="pl-k">=</span> <span class="pl-c1">OSM</span>::<span class="pl-c1">Mercator</span>.<span class="pl-k">new</span>(min_lat, min_lon, max_lat, max_lon, width, height)

      image <span class="pl-k">=</span> <span class="pl-c1">GD2</span>::<span class="pl-c1">Image</span>::<span class="pl-c1">IndexedColor</span>.<span class="pl-k">new</span>(width, height)

      black <span class="pl-k">=</span> image.palette.allocate(<span class="pl-c1">GD2</span>::<span class="pl-c1">Color</span>[<span class="pl-c1">0</span>, <span class="pl-c1">0</span>, <span class="pl-c1">0</span>])
      white <span class="pl-k">=</span> image.palette.allocate(<span class="pl-c1">GD2</span>::<span class="pl-c1">Color</span>[<span class="pl-c1">255</span>, <span class="pl-c1">255</span>, <span class="pl-c1">255</span>])

      image.draw <span class="pl-k">do</span> |<span class="pl-smi">pen</span>|
        pen.color <span class="pl-k">=</span> white
        pen.rectangle(<span class="pl-c1">0</span>, <span class="pl-c1">0</span>, width, height, <span class="pl-c1">true</span>)
      <span class="pl-k">end</span>

      image.draw <span class="pl-k">do</span> |<span class="pl-smi">pen</span>|
        pen.color <span class="pl-k">=</span> black
        pen.anti_aliasing <span class="pl-k">=</span> <span class="pl-c1">true</span>
        pen.dont_blend <span class="pl-k">=</span> <span class="pl-c1">false</span>

        oldpx <span class="pl-k">=</span> <span class="pl-c1">0.0</span>
        oldpy <span class="pl-k">=</span> <span class="pl-c1">0.0</span>

        first <span class="pl-k">=</span> <span class="pl-c1">true</span>

        points <span class="pl-k">do</span> |<span class="pl-c1">p</span>|
          px <span class="pl-k">=</span> proj.x(<span class="pl-c1">p</span>.longitude)
          py <span class="pl-k">=</span> proj.y(<span class="pl-c1">p</span>.latitude)

          pen.line(px, py, oldpx, oldpy) <span class="pl-k">unless</span> first

          first <span class="pl-k">=</span> <span class="pl-c1">false</span>
          oldpy <span class="pl-k">=</span> py
          oldpx <span class="pl-k">=</span> px
        <span class="pl-k">end</span>

      <span class="pl-k">end</span>
  
      image.gif
    <span class="pl-k">end</span>
  <span class="pl-k">end</span></pre></div>

<p style="font-size:small;-webkit-text-size-adjust:none;color:#666;">—<br />You are receiving this because you are subscribed to this thread.<br />Reply to this email directly, <a href="https://github.com/openstreetmap/openstreetmap-website/issues/281#issuecomment-427652304">view it on GitHub</a>, or <a href="https://github.com/notifications/unsubscribe-auth/ABWnLTp3YKunaQbopuNurAYsNUGPd39tks5uif02gaJpZM4ApuZI">mute the thread</a>.<img src="https://github.com/notifications/beacon/ABWnLbykoz4lvynipN_Z7PHJjVl5_Uilks5uif02gaJpZM4ApuZI.gif" height="1" width="1" alt="" /></p>
<script type="application/json" data-scope="inboxmarkup">{"api_version":"1.0","publisher":{"api_key":"05dde50f1d1a384dd78767c55493e4bb","name":"GitHub"},"entity":{"external_key":"github/openstreetmap/openstreetmap-website","title":"openstreetmap/openstreetmap-website","subtitle":"GitHub repository","main_image_url":"https://assets-cdn.github.com/images/email/message_cards/header.png","avatar_image_url":"https://assets-cdn.github.com/images/email/message_cards/avatar.png","action":{"name":"Open in GitHub","url":"https://github.com/openstreetmap/openstreetmap-website"}},"updates":{"snippets":[{"icon":"PERSON","message":"@mmd-osm in #281: Rendering a GPX trace icon isn't too difficult using gd2-ffij:\r\n\r\n```ruby\r\n    require 'gd2-ffij'\r\n\r\n[...]\r\n\r\n    def icon(min_lat, min_lon, max_lat, max_lon)\r\n      width = 50\r\n      height = 50\r\n      proj = OSM::Mercator.new(min_lat, min_lon, max_lat, max_lon, width, height)\r\n\r\n      image = GD2::Image::IndexedColor.new(width, height)\r\n\r\n      black = image.palette.allocate(GD2::Color[0, 0, 0])\r\n      white = image.palette.allocate(GD2::Color[255, 255, 255])\r\n\r\n      image.draw do |pen|\r\n        pen.color = white\r\n        pen.rectangle(0, 0, width, height, true)\r\n      end\r\n\r\n      image.draw do |pen|\r\n        pen.color = black\r\n        pen.anti_aliasing = true\r\n        pen.dont_blend = false\r\n\r\n        oldpx = 0.0\r\n        oldpy = 0.0\r\n\r\n        first = true\r\n\r\n        points do |p|\r\n          px = proj.x(p.longitude)\r\n          py = proj.y(p.latitude)\r\n\r\n          pen.line(px, py, oldpx, oldpy) unless first\r\n\r\n          first = false\r\n          oldpy = py\r\n          oldpx = px\r\n        end\r\n\r\n      end\r\n  \r\n      image.gif\r\n    end\r\n  end\r\n```"}],"action":{"name":"View Issue","url":"https://github.com/openstreetmap/openstreetmap-website/issues/281#issuecomment-427652304"}}}</script>
<script type="application/ld+json">[
{
"@context": "http://schema.org",
"@type": "EmailMessage",
"potentialAction": {
"@type": "ViewAction",
"target": "https://github.com/openstreetmap/openstreetmap-website/issues/281#issuecomment-427652304",
"url": "https://github.com/openstreetmap/openstreetmap-website/issues/281#issuecomment-427652304",
"name": "View Issue"
},
"description": "View this Issue on GitHub",
"publisher": {
"@type": "Organization",
"name": "GitHub",
"url": "https://github.com"
}
},
{
"@type": "MessageCard",
"@context": "http://schema.org/extensions",
"hideOriginalBody": "false",
"originator": "AF6C5A86-E920-430C-9C59-A73278B5EFEB",
"title": "Re: [openstreetmap/openstreetmap-website] Status of picture/icon methods in lib/gpx.rb (#281)",
"sections": [
{
"text": "",
"activityTitle": "**mmd**",
"activityImage": "https://assets-cdn.github.com/images/email/message_cards/avatar.png",
"activitySubtitle": "@mmd-osm",
"facts": [

]
}
],
"potentialAction": [
{
"name": "Add a comment",
"@type": "ActionCard",
"inputs": [
{
"isMultiLine": true,
"@type": "TextInput",
"id": "IssueComment",
"isRequired": false
}
],
"actions": [
{
"name": "Comment",
"@type": "HttpPOST",
"target": "https://api.github.com",
"body": "{\n\"commandName\": \"IssueComment\",\n\"repositoryFullName\": \"openstreetmap/openstreetmap-website\",\n\"issueId\": 281,\n\"IssueComment\": \"{{IssueComment.value}}\"\n}"
}
]
},
{
"name": "Close issue",
"@type": "HttpPOST",
"target": "https://api.github.com",
"body": "{\n\"commandName\": \"IssueClose\",\n\"repositoryFullName\": \"openstreetmap/openstreetmap-website\",\n\"issueId\": 281\n}"
},
{
"targets": [
{
"os": "default",
"uri": "https://github.com/openstreetmap/openstreetmap-website/issues/281#issuecomment-427652304"
}
],
"@type": "OpenUri",
"name": "View on GitHub"
},
{
"name": "Unsubscribe",
"@type": "HttpPOST",
"target": "https://api.github.com",
"body": "{\n\"commandName\": \"MuteNotification\",\n\"threadId\": 10937928\n}"
}
],
"themeColor": "26292E"
}
]</script>